Сохранение изображения с холста в zip файле

У меня есть холст в HTML5, который может оказаться очень длинным dataURL (достаточно долго, чтобы разбивать хром, если они пытаются перейти к нему). Из-за этого я пытаюсь сохранить изображение в zip, используя JSZip. Я пробовал следующие две вещи:

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

Это приводит к следующей ошибке:

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

Я также пробовал это:

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

Это похоже на работу, но тогда изображение в zip недопустимо. Что можно сделать для правильного сохранения изображения?

Ответы

Ответ 1

Вы генерируете данные uri, у которых есть схема, mime-тип и т.д. перед фактическими данными base64 data:[<MIME-type>][;charset=<encoding>][;base64],<data>. Вам нужно будет удалить все содержимое перед данными, а затем использовать его.

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