Чистая библиотека обработки изображений Javascript (в двоичном виде, а не через DOM)

Question

Поскольку Файловый API обеспечит доступ к содержимому локальных файлов, теперь можно изменять размер изображения перед загрузкой (довольно распространенная задача) без каких-либо дополнительных технологий, таких как Flash или Silverlight. За исключением того, что я не могу найти библиотеку Javascript, которая могла бы обрабатывать изображения в двоичной форме. Есть ли? Может быть, в скрипте ECMA Флэша есть что-то, что можно адаптировать, но я просто не могу ничего найти.

Answer 1

Хотя я не нашел таких библиотек, я нашел способ выполнить описанную задачу:

• Считать изображение как URL данных
• Загрузите изображение в тег canvas и измените его размер
• Кодирование данных изображения холста в некоторый формат изображения, например JPG . Или используйте Canvas.toDataUrl () , а затем (необязательно) некоторый декодер base64.

Изменение размера изображения на стороне клиента и загрузка с использованием чистого JavaScript. Это круто, не правда ли?

Answer 2

Одна проблема с ответом calavera.info (извините, я не могу прокомментировать этот ответ напрямую) заключается в том, что вызов либо CanvasRenderingContext2D.getImageData, либо Canvas.toDataURL, упомянутый в третьем пункте, не будет выполнен. Каждый из них генерирует исключение SECURITY_ERR: DOM 18, поскольку изображение не из того же источника или домена, что и документ, которому принадлежит элемент canvas. Это кажется неизбежным, поскольку изображение поступает из локальной файловой системы (через тэг input type = "file"), но страница поступает с вашего веб-сервера.

Answer 3

Не знаю, хотите ли вы, но на Userscripts.org есть несколько скриптов, которые обрабатывают изображения: http://userscripts.org/scripts/show/38736

Answer 4

Даже если вы найдете что-то, что понимает изображения в чистом javascript, вам все равно потребуется DOM для его рендеринга, что делает его невероятно медленным.