Положить генерированное изображение PNG в JSZip

Question

Я использую JSZip, чтобы создать программу, которая генерирует данные изображения из элемента canvas и помещает изображение в 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 для сохранения строки (unicode). Поскольку это не текстовое содержимое, вы получаете поврежденный контент. Чтобы исправить это, вы можете сделать:

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

Как предложил дандавис, использование blob будет более эффективным. Вы можете конвертировать холст в сгустка с canvas.toBlob:

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

Единственное ограничение в том, что toBlob является асинхронным: вы должны отключить кнопку загрузки в это время (или, если пользователь достаточно быстро или браузер медленно достаточно, zip.file не будет выполнен, и вы дадите пустой почтовый индекс своему пользователю).

document.getElementById("download_button").disabled = true; 
screen.toBlob(function (blob) { 
    zip.file("hello.png", blob); 
    document.getElementById("download_button").disabled = false; 
});