Konwersja danych base64 png do pliku JavaScript obiektów

Question

Mam dwa base64 zakodowany w PNG, i muszę porównać je za pomocą Resemble.JS

Myślę, że najlepszym sposobem na to jest do konwersji PNG „s do obiektów File przy użyciu fileReader. Jak mogę to zrobić?

Answer 1

Można utworzyć Blob z danymi base64, a następnie ją przeczytać 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); 

Pełny przykład (zawiera kod śmieci i dziennik konsoli): http://jsfiddle.net/tTYb8/

---

Alternatywnie, możesz użyć .readAsText, działa dobrze i jest bardziej elegancki .. ale z jakiegoś powodu tekst nie brzmi dobrze;)

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 

Pełny przykład: http://jsfiddle.net/tTYb8/3/

Answer 2

poprzedniej odpowiedzi nie działa dla mnie.

Ale zadziałało idealnie. Convert Data URI to File then append to FormData

Answer 3

Sposób 1: działa tylko dla danych, nie dla innych typów adresów URL.

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: działa dla każdego typu url (http url, dataURL, blobURL, etc ...)

//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); 
}) 

Obie prace w Chrome i Firefox.