it-swarm.com.de

Konvertieren Sie Base64-PNG-Daten in Javascript-Dateiobjekte

Ich habe zwei base64 in PNG codiert, und ich muss sie mit Resemble.JS vergleichen

Ich denke, dass der beste Weg, dies zu tun, darin besteht, die PNG mit fileReader in Dateiobjekte zu konvertieren. Wie kann ich es tun?

35
Bonik

Sie können aus Ihren base64-Daten ein Blob erstellen und es dann lesen 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);

Vollständiges Beispiel ( enthält Junk-Code und Konsolenprotokoll ): http://jsfiddle.net/tTYb8/


Alternativ können Sie .readAsText, es funktioniert gut und es ist eleganter .. aber aus irgendeinem Grund klingt der Text nicht richtig;)

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

Vollständiges Beispiel: http://jsfiddle.net/tTYb8/3/

34
c69

Methode 1: Funktioniert nur für dataURL, nicht für andere Arten von URLs.

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

Weg 2: funktioniert für jede Art von 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);
})

Beide funktionieren in Chrome und Firefox.

45
cuixiping

Die vorherige Antwort hat bei mir nicht funktioniert.

Das hat aber einwandfrei funktioniert. Daten-URI in Datei konvertieren und dann an FormData anhängen

4
love2code