1

キャンバス データから画像情報を抽出し、.png ファイルに表示しようとしています。これまでのところ、toDataURL() メソッドを使用してキャンバスから Base64 情報を抽出し、blob オブジェクト (.png 画像として正しく識別されます) を作成できましたが、画像は常に空白です。助言がありますか？これがコードです

        var canvasData = markup.find('canvas');
        var imageDataURL = canvasData[4].toDataURL("image/png");
        var theData = atob(imageDataURL.substring('data:image/png;base64,'.length)), asArray = new Uint8Array(theData.length);
        for (var i = 0, len = theData.length; i < len; ++i) {
            asArray[i] = theData.charCodeAt(i);
        }
        var blob = new Blob([asArray.buffer], { type: 'image/png' }); saveAs(blob, 'export_' + Date.now() + '.png');

興味深いことに、サイズは正しいです。欠けているのは、.png 内の実際の画像だけです。

4

1 に答える 1

0

関数がファイルのダウンロードを開始すると仮定すると、データ URL を要素に割り当て、目的のファイル名を設定し、 を使用してファイルのダウンロードを開始するsaveAsだけで、ショートカットを作成できます。aa.downloada.click()

function canvasToFile()
{
    var canvas = document.getElementsByTagName('canvas')[0];
    canvas.getContext("2d").drawImage(img, 0, 0);
    var a = document.createElement('a');
    a.href = canvas.toDataURL("image/png");
    a.download = 'export_' + Date.now() + '.png';
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
}
// For demo:
var img = document.getElementsByTagName('img')[0];
img.crossOrigin = 'Anonymous';
img.addEventListener('load', canvasToFile);
img.src = 'http://lorempixel.com/400/400/';
<canvas width="400" height="400"/>
<img/>

a一部のブラウザーでは、DOM ツリーに追加する必要はありません(したがって行a.style.display = 'none';と行をdocument.body.appendChild(a);省略できます) が、他のブラウザー (たとえば、Firefox では、私が間違っていなければ) は必要です。

于 2015-08-05T14:33:24.307 に答える