Lưu hình ảnh từ canvas theo dạng zip

Question

Tôi có canvas trong HTML5 có thể kết thúc là một URL dữ liệu rất dài (đủ dài để lỗi chrome nếu họ cố điều hướng đến nó). Vì lý do đó, tôi đang cố gắng lưu hình ảnh trong một zip bằng JSZip. Tôi đã thử hai điều sau đây:

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"})); 

Điều này gây ra các lỗi sau:

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

Tôi cũng đã cố gắng này:

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"})); 

đó dường như làm việc, nhưng sau đó các hình ảnh trong zip không hợp lệ. Tôi có thể làm gì để lưu hình ảnh đúng cách?

Answer 1

Bạn đang tạo một uri dữ liệu, có lược đồ, loại mime, vv trước dữ liệu base64 thực tế data:[<MIME-type>][;charset=<encoding>][;base64],<data>. Bạn sẽ phải xóa tất cả nội dung trước khi dữ liệu, sau đó sử dụng nó.

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