キャンバスから画像をジップに保存する

Question

HTML5のキャンバスは非常に長いdataURLになります（移動しようとするとクロムがクラッシュするほど長くなります）。そのため、JSZipを使用してイメージをzipに保存しようとしています。動作するように思われること

var zip = new JSZip(); 
zip.file("image.png", canvas.toDataURL(), {base64: true}); 
var content = zip.generate(); 
var blobLink = document.getElementById('blob'); 
blobLink.download = "image.zip"; 
blobLink.href = window.URL.createObjectURL(zip.generate({type:"blob"})); 

が、その後の画像：私もこれを試してみました

Uncaught TypeError: Object #<HTMLImageElement> has no method 'replace' 

：

var zip = new JSZip(); 
var savable = new Image(); 
savable.src = canvas.toDataURL(); 
zip.file("image.png", savable, {base64: true}); 
var content = zip.generate(); 
var blobLink = document.getElementById('blob'); 
blobLink.download = "image.zip"; 
blobLink.href = window.URL.createObjectURL(zip.generate({type:"blob"})); 

これは、次のエラーが発生します。私は、次の二つのことを試してみましたジップでは有効ではありません。画像を正しく保存するにはどうすればよいですか？

Answer 1

実際のbase64データdata:[<MIME-type>][;charset=<encoding>][;base64],<data>の前に、スキーマ、mime-typeなどを含むデータuriを生成しています。データの前にすべてのコンテンツを削除してから使用する必要があります。

zip.file("image.png", savable.src.substr(savable.src.indexOf(',')+1), {base64: true});