使用javascript/css將64位字符串轉換爲jpeg

爲了避免firefox對大型圖像進行積極的刪除/垃圾回收，我們一直在試驗如何存儲對圖像的引用。保持對「新Image（）」對象的引用似乎可行，但會佔用大量內存。使用javascript/css將64位字符串轉換爲jpeg

我現在使用

$.ajax({ 
    url: "http://localhost/360/img/frames/compressed/frame0470.jpg", 
    dataType: "text", 
    success: function(r) { 
     console.log(r); 
    } 
});

檢索圖像的的base64字符串（這大概可以存儲在與圖像對象更少的內存，並且不會受到Firefox的圖像垃圾收集）實驗。但是，我怎樣才能將它轉換成JPEG格式？

來源

2012-04-24 wheresrhys

我假設你的意思是base64。你得到的答案是圖像的文本表示。不base64。但是，你試圖做的事聽起來像一個壞主意。處理過期的緩存服務器。 – binarious 2012-04-24 11:56:28

@binarious - 這可能是我錯了，因爲我沒有深入研究過，但似乎在最近的版本中，firefox已經實現了一種積極的垃圾收集功能，即圖像（即使它們當前正在被web使用定期從內存中刪除頁面（推測是爲了提高性能）。也許'緩存'不是我應該使用的術語 - 我將修改問題以反映這 – wheresrhys 2012-04-24 12:12:14

這是什麼問題？ – binarious 2012-04-24 12:16:28

我真的不明白你想要達到的原因，但你應該能夠在XHR中獲取二進制數據，而不是將自己限制在由jQuery提供的類型中。

首先，讀MDC文檔這裏以檢索所述圖像的適當的二進制串 https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Receiving_binary_data_in_older_browsers

其次，二進制串可通過window.btoa()轉換成BASE64。

三，可以通過構造數據url來顯示base64圖片字符串。我相信你已經知道如何去做。

比較實際的二進制數據，二進制串成本4倍以上存儲器由於串中的每個字符實際上是在存儲器中作爲使用Javascript 4個字節使用UCS-2內部。 Base64字符串的成本爲4 * 1.3 = 5.2倍以上的內存。 Base64數據比原始數據大130％。

在Javascript中處理二進制數據的一種簡單方法是使用Blob對象。但我沒有看到無論如何得到一個Blob顯示爲圖像，所以...

如果你想避免侵略性圖像驅逐，我認爲可能的方法是將圖像粘貼到<畫布>元素和顯示它。

<canvas>實際上內置函數toDataURL()提供了你想要的數據，但如果你擺脫了圖像驅逐，那麼你不需要它。

來源

2012-04-24 14:12:34 timdream

這是一篇文章的兩個答案！試試他們兩個並告訴我結果！ – timdream 2012-04-24 14:15:58

最後，我們去存儲Image對象中很快需要使用的圖像，並實現我們自己的garabage集合實用程序，以確保存儲最少量的圖像，但您的答案看起來不錯。如果我需要使用base64圖像字符串，我會重新訪問它。 – wheresrhys 2012-04-27 11:37:24

我真的不明白你想達到的理由，但要回答你的問題：

基本思想：

你需要編碼數據爲Base64：

var base64Data = Base64.encode(r);

顯示Base64的圖片：

$('<img>') // create new image 
    .attr('src', 'data:image/jpeg;base64,' + base64Data) // set image data as b64 
    .appendTo('body'); // add the image tag to the body element (or any other)

但實際上它似乎更復雜一點：http://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html

來源

2012-04-24 12:26:42 binarious

使用javascript/css將64位字符串轉換爲jpeg

回答

相關問題