生成されたPNG画像をJSZipに入れます

Question

私は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ファイルの画像です： incorrect text http://upurs.us/image/71280.png

そして、ここでは何であるかであるようになります。 correct text http://upurs.us/image/71281.png

ご覧のとおり、若干の違いがありますが、理由はわかりません。 PNGファイルの種類やASCIIについては何も知りませんので、ここからどこに行くのかはわかりません。 http://s000.tinyupload.com/download.php?file_id=09682586927694868772&t=0968258692769486877226111

EDIT：私の最終目標は、私が作るためにそれらを使用できるように、キャンバスのアニメーションのすべての単一のフレームをエクスポートするプログラムを持つことである

あなたはすべての私の作品を見たい場合は、ここではプロジェクトですビデオ。誰かがそれを行うプログラムを知っているなら、投稿してください！

Answer 1

zip.file("hello.png", imgData)を使用すると、imgDataが文字列の場合、JSZipに（ユニコード）文字列を保存するように指示します。テキストコンテンツではないので、破損したコンテンツを取得します。それを修正するには、行うことができます：

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

をdandavisが示唆したように、ブロブを使用すると、ここで、より効率的になります。

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

唯一の注意点はtoBlobが非同期であるということです：あなたはcanvas.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; 
});