17

data:imagebase64でエンコードされた画像を通常の画像ファイルに変換したい。これまでのところ、私のコードは次のようになります。

this.toDataURL = function() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = innerWidth;
    canvas.height = innerHeight;
    ctx.drawImage(layer0, 0, 0);
    ctx.drawImage(layer1, 0, 0);
    ctx.drawImage(layer2, 0, 0);
    var url = canvas.toDataURL('image/png');
    document.getElementById('canvascontent').value = url;
};

ご覧のとおり、後で出力 (#cancascontent) に表示される DataUrl を作成します。最終的な出力は次のようになります。

data:image/png;base64,iVBORw0KGgo.................

私の問題は、画像をアップロードできるように、必ずデコードする必要があることです。私の目的は、JavaScript コードが「通常の」画像ファイルのように新しいウィンドウに画像を表示することです。例えば。このような：

http://example.com/images/pro_js_3e.png

base64 イメージをデコードするにはどうすればよいですか?

4

3 に答える 3

4

https://github.com/blueimp/JavaScript-Canvas-to-Blobのコードは少し長いです。

私の dataURLtoBlob() 関数コードははるかに短くなっています。

dataURL を blob に変換し、FormData と ajax を使用して送信します。

function dataURLtoBlob(dataurl) {
    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 Blob([u8arr], {type:mime});
}

var dataurl = canvas.toDataURL('image/png'); //canvas to png dataurl
//var dataurl = canvas.toDataURL('image/jpeg',0.8); //canvas to jpg dataurl
var blob = dataURLtoBlob(dataurl);

var fd = new FormData();
fd.append("image", blob, "filename.png");
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.send(fd);
于 2015-05-23T01:57:07.343 に答える
2

したがって、アップロードする前にbase64からバイナリに変換できるとは思いません(おそらく方法はありますが、かなり複雑になる可能性があります)。通常の画像リンクとして提供するという最後の要件は、サーバーのどこかに保存する必要があることを意味します。これは、何をするにしても、アップロードする必要があることを意味します。

それを考えると、最も簡単な解決策についての私の意見は、base64 を POST し、サーバーにデコード、保存、および提供させることです。

于 2013-06-26T19:13:36.527 に答える