データURIをイメージとして保存しますか？

Question

ノードサーバー上でアップロードされたデータリデータをイメージとして保存したいと思います。私はこの内容を解読しようとしたこれを行うには

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

をpng-そして.png拡張子として保存します。それ以上のものがあるように見えます。どのように私はdatauriをデコードし、ファイルとして保存するのですか？

Answer 1

あなたは、コードの下に使用してブロブにあなたのデータのURIを変換することができます：

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

をし、その後、データからこのブロブデータを追加し、ファイルとしてアップロードすることができます

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

Answer 2

I atobを使用してデータをデコードしようとしていて、これをpngファイルとして保存しようとしていました。代わりに、それをbase64でエンコードしていますが、書き込みバッファにエンコードを指定しています。

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

Answer 3

私は、データURIスキームの符号化と復号化に役立つのNode.jsで使用するライブラリを作成しました。私はそれをチェックし、あなたを助けることができると信じて：

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

をこのライブラリを使用して、あなたのケースでは、コードは次のようになります。私はサーバー上でこれを行うために容易になるだろうように感じる

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