Загрузитесь с Файловым API

Шаг 2: Загрузите изображение на холст

Функция readFile на шаге 1 передает созданный URL-адрес данных другой пользовательской функции applyDataUrlToCanvas. Эта функция рисует выбранное изображение на холсте. Вот как это работает:

• Найдите ширину и высоту изображения.
• Найдите ориентацию изображения.
• Нарисуйте наилучший вариант изображения на холсте.

Найти ширину и высоту

Используя функцию DOM Image, вы можете легко определить размеры любого изображения. Это удобная техника, которая выглядит примерно так:

  var img = новое изображение ();
	 img.onload = function () {
	 // img.width
	 // img.height
	 }
	 img.src = dataURL; 

Найти ориентацию

К сожалению, есть проблема с шириной и высотой, и она большая: снимок мог быть сделан в портретном режиме и сохранен в альбомной ориентации, или изображение могло быть перевернуто вверх дном.

Некоторые камеры вместо сохранения изображения в правильной ориентации предоставляют свойство Ориентация в данных EXIF изображения. Это можно прочитать из двоичных данных изображения.

Преобразование URL-адреса данных в двоичную строку легко:

  var base64 = dataUrl.replace (/^.*?,/, '');
	 var binary = atob (base64); 

И, к счастью, есть клиентская библиотека с открытым исходным кодом EXIF , написанная Джейкобом Сейделином, которая будет возвращать данные EXIF ​​как объект. Да, классно!

  <script src = "http://www.nihilogic.dk/labs/exif/exif.js"> </ script>
	 <script src = "http://www.nihilogic.dk/labs/binaryajax/binaryajax.js"> </ script>
	 <Скрипт>
	 var exif = EXIF.readFromBinaryFile (новый BinaryFile (двоичный));
	 //exif.Orientation
	 </ Скрипт> 

Свойство Orientation представляет собой целое число в диапазоне 1–8, соответствующее четырем поворотам и четырем переворотам (довольно избыточным).

Нарисуйте изображение на холсте

Обнаружив значение Orientation, вы можете вращать и рисовать на холсте. Если вы хотите увидеть мой алгоритм, просто покопайтесь в исходном коде, который вы можете найти по адресу http://adodson.com/graffiti/ и https://github.com/MrSwitch/graffiti .

Шаг 3: Загрузите изображение

Последний шаг — загрузить измененное изображение. В репертуаре FileAPI вы можете использовать интерфейс Blob для создания файлов в клиенте. Оберните это новым msSaveBlob в Internet Explorer 10 или хаком атрибута загрузки (готовится) в других современных браузерах, и вместе они позволяют вам скачивать файлы в клиенте.

Попробуйте сами в демоверсии . Нажмите на кнопку Скачать.

Демонстрация использует метод canvas.toBlob в Internet Explorer 10 для получения ссылки на файл изображения, которое в данный момент отрисовывается в теге canvas. Для Chrome и FireFox отлично работает прокладка toBlob .

  canvas.toBlob (function (file) {
	 // Создать файл BLOB-объекта,
	
	 // затем загружаем с помощью FileSaver
	 } 

Сделайте копию экземпляра Blob Object

Мы должны быть в состоянии пропустить этот шаг, но из-за причуд во всех браузерах нельзя использовать API FileSave непосредственно из экземпляра Blob, возвращаемого canvas.toBlob. Вы должны скопировать это.

Интерфейс BlobBuilder, используемый для создания новых ссылок Blob, поддерживается в Internet Explorer 10, Chrome и FireFox. Но этот интерфейс уже был заменен конструктором Blob, который сейчас имеет ограниченную поддержку.

Во-первых, удалите префиксы поставщиков BlobBuilder:

  // Shim BlobBuilder с префиксами поставщика
	 window.BlobBuilder ||  (window.BlobBuilder = window.MSBlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder); 

Затем проверьте ваш код на будущее и протестируйте конструктор Blob. В противном случае создайте BlobBuilder для создания BLOB-объекта . (Лучше всего обернуть методы в try-catch.) В текущем браузере Chrome для Android есть ошибка. Вот код

  вар блоб;
	 if («Blob» в окне) {
	 пытаться{
	 // Новый интерфейс Blob
	 blob = new Blob ([file], {"type": "image / png"});
	 поймать (е) {}
	 }
	 если (! блоб) {
	 пытаться{
	 // Устаревший интерфейс BlobBuilder
	 var bb = new BlobBuilder ();
	 bb.append (файл);
	 blob = bb.getBlob ("image / png");
	 }
	 поймать (е) {}
	 } 

Загрузка BLOB-объекта с помощью FileSaver

FileSaver API также является стандартом, который еще не принят ни одним из существующих браузеров. Тем не менее, в случае Internet Explorer 10 вы можете использовать функцию msSaveBlob (что потрясающе), а для Chrome и FireFox вы можете по крайней мере использовать их в будущем с префиксами поставщиков. Итак, функция saveAs нуждается в некотором массовом отбрасывании:

  window.saveAs ||  (window.saveAs == window.navigator.msSaveBlob || window.webkitSaveAs || window.mozSaveAs || window.msSaveAs / ** || URL Download Hack ** /); 

Этот запасной вариант (полностью описанный на https://gist.github.com/3552985 ) упрощает интерфейс FileSaver, используя URL-адрес объекта для нашего нового изображения. Для браузеров, которые поддерживают атрибут загрузки в теге привязки, shim определяет href как URL объекта, а затем отправляет событие click, чтобы заставить его загрузить или иным образом открыть в новой вкладке. О, какие спутанные ткани мы плетем.

Наконец, с учетом большого двоичного объекта и имени файла метод saveAs инициирует загрузку:

  var name = 'Graffiti.png';
	 если () {window.saveAs
	 // Перемещаем содержимое объекта компоновщика в BLOB и
	 window.saveAs (blob, name);
	 }
	 еще {
	 // Fallover, открыть как DataURL
	 window.open (canvas.toDataURL ());
	 } 

Здесь, если прокладка saveAs несовместима, фолловер откроет новую вкладку с Base64 Data-URL . Это работает в Internet Explorer 9, но Internet Explorer 8 ограничен длиной DataURI 32 КБ.

Завершение

Если вы еще не играли с File API, я настоятельно призываю вас. FileAPI открывает большой потенциал для создания настольных приложений для браузера. Возможно, вы захотите немного больше контролировать, где вы сохраняете файлы и даже перезаписываете существующий файл. Но на данный момент система безопасности требует осторожности, поэтому вряд ли вы скоро увидите подобные функции. Спецификации все еще находятся в движении, но то, что я подчеркнул в этой статье, привело к огромным инвестициям со стороны производителей браузеров и вряд ли сильно изменится, если вообще изменится. Пожалуйста, не цитируйте меня, хотя.

Если вам требуется поддержка старых браузеров, взгляните на мой shim dropfile.js для Internet Explorer, который упрощает FileReader и создает base-URI- код для base64, а также Downloadify для замены shim на основе Flash на FileSaver.

Ресурсы

• «Сохранить / загрузить данные, созданные в JavaScript»
• Черновики API файлов на W3C
• «Новый конструктор BLOB-объектов в IE10»
• «Создание файлов через BlobBuilder»
• «Работа с файлами в JavaScript, часть 1: основы»

Эта статья была первоначально опубликована по адресу http://msdn.microsoft.com/en-us/magazine/jj835793.aspx и воспроизводится здесь с разрешения.