Активность H5 очень распространена, одна из форм - позволить пользователям загружать изображения для участия. Мобильный терминал загружает фотографии. Если загрузка загружается напрямую, она потребляет много трафика, а опыт не очень хороший. Поэтому перед загрузкой вам необходимо сжать локальную область.
Затем суммируйте функцию загруженной сжатия при разработке активности H5, и отметьте несколько ям, которые были наступили, и поделитесь им с вами:Сяобайский район должен -см.
Если нет концепции загрузки мобильных изображений, вам необходимо дополнить три понятия FileReader, Blob и FormData.
1.FileReaderопределение
Используя объект FileReader, веб -приложение может быть асинхронным для чтения файла (или необработанного буфера данных), хранящегося на пользовательском компьютере.
метод
Процедура обработки событий
использовать
Var filereader = new FileReader ();2. Blob
Blob (двоичный большой объект), двоичный объект, представляет собой контейнер, который может хранить двоичные файлы.
3. ФормадатаИспользуя объект FormData, вы можете использовать серию значений ключей для моделирования полной формы, а затем использовать Xmlhttprequest для отправки этой формы.
Тема
Движение изображения сжатие и процесс загрузки:1) Входной файл загружает изображения и читайте изображение, загруженное пользователями с помощью FileReader;
2) Данные изображения передаются в объект IMG, рисуют IMG на холст, а затем используют Canvas.todataurl для сжатия;
3) Получите данные изображения формата сжатого BASE64, превратите его в двоичный, подключите к FormData и, наконец, отправьте FormData через Xmlhttprequest
1. Получите данные изображения Fileele.onchange = function () {if (! This.files.length) return; .test (_simplefile.type)) return; .getTag (this, 'Orientation');} // 1. .src; сжатие (_img); 2. Сжатая картинка /** * Рассчитайте размер картинки, сжатие размера в соответствии с размером * 1. Мобильный телефон iPhone HTML5 Загрузите проблему направления изображения, используйте eSif.js * 2. Browser Android UC не поддерживает новый Blob (), Используйте Blobbuilder* @param {object} _img Image* @param {number} _ontation photo information* @return {string} изображения изображения в Base64 Format*/function compress (_img, _orientation) {// 2. Рассчитайте значение ширины Целевой размер, если высокая высота изображения загружает изображение изображения, более высокой, чем целевая диаграмма, и сжимают карту целевого цвета и другое сжатие; Var _goalwidth = 750, // target width_goalheight = 750, // target height_imgwidth = _img.naturwidth, // image width_imgheight = _img.naturalHeight, // picture height_tempwi dth = _imgwidth, // zoom -or shrink wild_temphie_temhight, / /Zoom -or Shrink_temhight, / /Zoom -orshiethe_temhight, / /Zoom -orshight, // shrink_temphie_temphi. Временная ширина после увеличения или сокращения _r = 0; // Коэффициент сжатия if (_imgwidth === _ чем целевая диаграмма, и равное сжатие сжимается _r = _imgwidth / _goalwidth; /_imgheight;}} else {if (_imgwidth <_goalwidth) {// мало, чем _r = _goalwidth/_imgwidth;} else {// Маленький меньше _r = __r = __r = _ __r = __goalheight/_r = __r = _ __r = __goalheight/_ } _tempwidth = math.ceil (_imgwidth * _r); GET ('Canvas-Clip'); Проблема с ошибкой направления (_ORIentation) {// Съемка на экране iPhone в настоящее время. Мобильный телефон обычно). Высота = _imgwidth; pi/180); = _Canvas.todataurl ('image/jpeg'); 3. Загрузите изображения /** * Загрузите изображение в nos * @param {object} _blog blob format картинка * @return {void} */function uploadphoto (_data) {// 4. Получить информацию о изображении в Canvas //window.atob Method будет Изображение формата Base64 преобразуется в бинарную строку; Split (',') [1]; _data.length); Не поддерживайте новый Blob (), используйте Blobbuilder var _blob; Window.webkitblobbuilder ||. (); $ requestdwrbyget, param: [_suffix, '', '', '', '1'], Onload: function (_tokens) {_tokens = _tokens || []; ||! '); ;); (_xhr.readystate === 4) {if (if (_xhr.status> = 200 && _xhr.status <300) || _xhr.status === 304) {var _imgurl = http://nos.netease.com / + _BucketName +/ + _ObjectName +? /act/taxiu? Op = Effect & OrigimGurl = ' + _Newurl;Определите направление съемки iPhone: Exif
Выше представлено мобильное изображение HTML5, сжавшаяся и загруженная функция, представленная Xiaobian для достижения эффекта моделирования фоновых данных. все вовремя. Большое спасибо за вашу поддержку на веб -сайте Vevb Wulin!