帶有base64中斷圖像的編碼/解碼圖像

我正在嘗試編碼和解碼圖像。我正在使用FileReader的readAsDataURL方法將圖像轉換爲base64。然後將其轉換回來，我嘗試過使用readAsBinaryString()和atob()，但沒有運氣。有沒有其他的方式來保持圖像沒有base64編碼他們？帶有base64中斷圖像的編碼/解碼圖像

readAsBinaryString()

Starts reading the contents of the specified Blob, which may be a File. When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains the raw binary data from the file.

任何想法我在做什麼錯在這裏？

示例代碼 http://jsfiddle.net/qL86Z/3/

$("#base64Button").on("click", function() { 
    var file = $("#base64File")[0].files[0] 
    var reader = new FileReader(); 

    // callback for readAsDataURL 
    reader.onload = function (encodedFile) { 
     console.log("reader.onload"); 
     var base64Image = encodedFile.srcElement.result.split("data:image/jpeg;base64,")[1]; 
     var blob = new Blob([base64Image],{type:"image/jpeg"}); 
     var reader2 = new FileReader(); 

     // callback for readAsBinaryString 
     reader2.onloadend = function(decoded) { 
      console.log("reader2.onloadend"); 
      console.log(decoded); // this should contain binary format of the image 

      // console.log(URL.createObjectURL(decoded.binary)); // Doesn't work 
     }; 
     reader2.readAsBinaryString(blob); 

     // console.log(URL.createObjectURL(atob(base64Image))); // Doesn't work 

    }; 
    reader.readAsDataURL(file); 
    console.log(URL.createObjectURL(file)); // Works 
});

謝謝！

來源

2013-02-19 sissonb

在瀏覽器這個例子中工作？ TypeError：encodedFile.srcElement未定義 – cIph3r 2013-02-19 23:35:41

我正在使用Chrome進行測試，但我需要它在最新的Android和iOS瀏覽器中工作。 – sissonb 2013-02-19 23:37:20

經過一些更多的研究，我發現從here 答案我基本上需要將原始二進制包裝在一個數組緩衝區中，並將二進制字符轉換爲Unicode。

這是失蹤的代碼，

var binaryImg = atob(base64Image); 
    var length = binaryImg.length; 
    var ab = new ArrayBuffer(length); 
    var ua = new Uint8Array(ab); 
    for (var i = 0; i < length; i++) { 
     ua[i] = binaryImg.charCodeAt(i); 
    }

完整的示例代碼是here

來源

2013-02-20 19:17:09 sissonb

URL.createObjectURL預計Blob（可以是File）作爲它的參數。不是一個字符串。這就是爲什麼URL.createObjectURL(file)有效。

相反，你要創建一個FileReaderreader讀取file作爲數據URL，然後使用這些數據的URL創建另一個Blob（內容相同）。然後你甚至創建一個reader2從剛剛構建的blob得到一個二進制字符串。但是，base64Image url字符串部分（即使btoa被解碼爲更大的字符串）也不是decoded.binary字符串都是URL.createObjectURL的vaild參數！

來源

2013-02-20 00:24:13 Bergi

雖然可以將'base64Image'轉換回原始文件嗎？我基本上試圖撤銷'reader.readAsDataURL（file）;'用'readAsBinaryString（）'或'atob（）'做的事情。 – sissonb 2013-02-20 00:31:17

'var blob = new Blob（[base64Image]，{type：「image/jpeg」}）;'應該這樣做嗎？嘗試'URL.createObjectURL（blob）;' – Bergi 2013-02-20 00:36:25

它顯示'URL.createObjectURL（blob）的破碎圖像;'我在這裏更新了JSFiddle，http://jsfiddle.net/qL86Z/7/ 這裏是一個截屏視頻破碎的圖像。 http://screencast.com/t/vVVGNTvo – sissonb 2013-02-20 00:41:51

帶有base64中斷圖像的編碼/解碼圖像

回答

相關問題