Chuyển đổi dữ liệu base64 png để tập tin javascript đối tượng

Question

Tôi có hai base64 mã hóa trong PNG, và tôi cần phải so sánh chúng bằng cách sử Resemble.JS

Tôi nghĩ rằng cách tốt nhất để làm điều đó là để chuyển đổi PNG 's thành các đối tượng tập tin sử dụng fileReader. Tôi làm nó như thế nào?

Answer 1

Bạn có thể tạo một Blob từ dữ liệu base64 của bạn, và sau đó đọc nó asDataURL:

var img_b64 = canvas.toDataURL('image/png'); 
var png = img_b64.split(',')[1]; 

var the_file = new Blob([window.atob(png)], {type: 'image/png', encoding: 'utf-8'}); 

var fr = new FileReader(); 
fr.onload = function (oFREvent) { 
    var v = oFREvent.target.result.split(',')[1]; // encoding is messed up here, so we fix it 
    v = atob(v); 
    var good_b64 = btoa(decodeURIComponent(escape(v))); 
    document.getElementById("uploadPreview").src = "data:image/png;base64," + good_b64; 
}; 
fr.readAsDataURL(the_file); 

Full dụ (bao gồm mã rác và console log): http://jsfiddle.net/tTYb8/

---

Ngoài ra, bạn có thể sử dụng .readAsText, nó hoạt động tốt, và nó thanh lịch hơn .. nhưng đối với một số lý do văn bản không có âm thanh đúng;)

fr.onload = function (oFREvent) { 
    document.getElementById("uploadPreview").src = "data:image/png;base64," 
    + btoa(oFREvent.target.result); 
}; 
fr.readAsText(the_file, "utf-8"); // its important to specify encoding here 

Full dụ: http://jsfiddle.net/tTYb8/3/

Answer 2

câu trả lời trước đã không làm việc cho tôi.

Nhưng điều này hoạt động hoàn hảo. Convert Data URI to File then append to FormData

Answer 3

Cách 1: chỉ hoạt động cho dataURL, không hoạt động cho các loại url khác.

function dataURLtoFile(dataurl, filename) { 
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], 
     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); 
    while(n--){ 
     u8arr[n] = bstr.charCodeAt(n); 
    } 
    return new File([u8arr], filename, {type:mime}); 
} 

//Usage example: 
var file = dataURLtoFile('data:image/png;base64,......', 'a.png'); 
console.log(file); 

Way 2: làm việc cho bất kỳ loại url, (url http, dataURL, blobURL, vv ...)

//return a promise that resolves with a File instance 
function urltoFile(url, filename, mimeType){ 
    mimeType = mimeType || (url.match(/^data:([^;]+);/)||'')[1]; 
    return (fetch(url) 
     .then(function(res){return res.arrayBuffer();}) 
     .then(function(buf){return new File([buf], filename, {type:mimeType});}) 
    ); 
} 

//Usage example: 
urltoFile('data:image/png;base64,......', 'a.png') 
.then(function(file){ 
    console.log(file); 
}) 

Cả hai công trình trong Chrome và Firefox.