6

JSZipを使用して、キャンバス要素から画像データを生成し、画像を zip ファイルに入れるプログラムを作成しています。

現在、キャンバス イメージを DataURL に変換しています。次に、結果の文字列の と書かれている部分を取り除きますdata:image/png;base64,。これで、base64 データ以外は何も残りません。次に、atobそれを ascii に変更します。

残りの文字列を画像ファイルに入れるとうまくいくようですが、生成された ascii テキストは正しくありません。その多くの部分は正しいのですが、何かが正しくありません。

これが私のコードです：

//screen is the name of the canvas.
var imgData = screen.toDataURL();
imgData = imgData.substr(22);
imgData = atob(imgData);
console.log(imgData);

結果の png ファイルのイメージを次に示します (メモ帳に): 不正なテキスト http://upurs.us/image/71280.png

そして、これは次のようになります: 正しいテキスト http://upurs.us/image/71281.png

ご覧のとおり、わずかな違いがあり、その理由はわかりません。私は PNG ファイルの種類や ASCII についてまったく知らないので、ここからどこへ行くべきかわかりません。

私の作品をすべて見たい場合は、プロジェクトをご覧ください: http://s000.tinyupload.com/download.php?file_id=09682586927694868772&t=0968258692769486877226111

編集: 私の最終目標は、キャンバス アニメーションのすべてのフレームをエクスポートして、それらを使用してビデオを作成できるプログラムを作成することです。誰かがそれを行うプログラムを知っている場合は、投稿してください!

4

1 に答える 1

9

zip.file("hello.png", imgData)where is a stringを使用する場合imgDataは、JSZip に (unicode) 文字列を保存するように指示します。これはテキスト コンテンツではないため、破損したコンテンツが表示されます。それを修正するには、次のことができます。

zip.file("hello.png", imgData, {binary: true})

ダンダビスが示唆したように、ここではブロブを使用する方が効率的です。canvas.toBlobを使用して、キャンバスを blob に変換できます。

screen.toBlob(function (blob) {
  zip.file("hello.png", blob);
});

唯一の注意点は、toBlob非同期であることです。その間はダウンロード ボタンを無効にする必要があります (そうしないと、ユーザーの速度が十分に速いか、ブラウザの速度が十分に遅い場合は、zip.file実行されず、空の zip がユーザーに提供されます)。

document.getElementById("download_button").disabled = true;
screen.toBlob(function (blob) {
  zip.file("hello.png", blob);
  document.getElementById("download_button").disabled = false;
});
于 2016-06-01T05:21:36.133 に答える