Speichern von Daten-URI als Bild?

Question

Auf einem Knotenserver möchte ich hochgeladene Datauri-Daten als Bild speichern. Um dies zu tun habe ich versucht Decodierung den Inhalt dieser png-

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAFlEcHbAAAAB3RJTUUH1gMWFjk7nUWcXQAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAAeSURBVHjaY7h79y7DhAkTGIA04/Tp0xkYGJ49ewYAgYwLV/R7bDQAAAAASUVORK5CYII= 

und als .png Erweiterung zu speichern. Sieht so aus, als ob da mehr ist. Wie dekodiere ich die Datauri und speichere sie als Datei?

Answer 1

Sie können Ihre Daten uri auf einen Klecks mit folgenden Code konvertieren:

function dataURItoBlob(dataURI) { 
    var byteStr; 
    if (dataURI.split(',')[0].indexOf('base64') >= 0) 
     byteStr = atob(dataURI.split(',')[1]); 
    else 
     byteStr = unescape(dataURI.split(',')[1]); 

    var mimeStr = dataURI.split(',')[0].split(':')[1].split(';')[0]; 

    var arr= new Uint8Array(byteStr.length); 
    for (var i = 0; i < byteStr.length; i++) { 
     arr[i] = byteStr.charCodeAt(i); 
    } 

    return new Blob([arr], {type:mimeStr}); 
} 

und dann können Sie diese Blob-Daten zu von Daten anhängen und als Datei hochladen:

var blob = dataURItoBlob(dataURI); 
var fd = new FormData(document.forms[0]); 
fd.append("image", blob); 

Answer 2

I versuchte, die Daten mit atob zu entschlüsseln und dies als PNG-Datei zu speichern. Ich speichere es stattdessen base64-codiert, aber die Codierung im Schreibpuffer angeben.

fs.writeFileSync('tmp/myfile.png', new Buffer(data, 'base64'));

Answer 3

ich eine Bibliothek erstellt habe, um mit Node.js verwendet werden, die mit Codierung und Decodierung von Daten URI-Systemen helfen. Ich glaube, es kann Ihnen helfen, überprüfen:

https://github.com/DiegoZoracKy/image-data-uri

Verwendung dieser Bibliothek, in Ihrem Fall würde der Code sein:

'use strict'; 

const ImageDataURI = require('image-data-uri'); 

const dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAFlEcHbAAAAB3RJTUUH1gMWFjk7nUWcXQAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAAeSURBVHjaY7h79y7DhAkTGIA04/Tp0xkYGJ49ewYAgYwLV/R7bDQAAAAASUVORK5CYII='; 
const fileName = 'decoded-image.png'; 

ImageDataURI.outputFile(dataURI, filePath);