2013-06-06 20 views
24

Mam dwa base64 zakodowany w PNG, i muszę porównać je za pomocą Resemble.JSKonwersja danych base64 png do pliku JavaScript obiektów

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

+0

na jakich właściwościach chcesz je porównać? –

+1

, aby zobaczyć, jak podobne są one – Bonik

+0

można użyć FileReader na blobach, i można nakarmić blob z binarnego ciągu znaków lub bufora tablicowego. są na to rozwiązania. – dandavis

Odpowiedz

27

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/

20

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.

+1

Działa świetnie, to powinna być akceptowana odpowiedź, jest o wiele prostsza –

+0

Możesz odgadnąć typ MIME i rozszerzenie przez: '' ' niech mecze = url.match (/^data: ([^;] +); base64, (. *) $ /); let mimeType = matches [1]; let extension = matches [1] .substr (matches [1] .indexOf ('/') + 1); '' ' –