Función de carga de compresión de imagen de desarrollo móvil HTML5

La actividad H5 es muy común, una forma es permitir que los usuarios carguen imágenes para participar. La terminal móvil sube imágenes. Si la carga se carga directamente, consume mucho tráfico y la experiencia no es buena. Por lo tanto, antes de cargar, debe comprimir el área local.

El distrito de Xiaobai debe ver

Si no hay un concepto de carga de imágenes móviles, debe complementar los tres conceptos de FileReader, Blob y FormData.

definición

Usando el objeto FileReader, la aplicación web puede ser asíncrona para leer el archivo (o búfer de datos sin procesar) almacenado en la computadora del usuario.

método

Procedimiento de procesamiento de eventos

usar

 Var filereader = new FileReader ();

Blob (objeto grande binario), un objeto binario, es un contenedor que puede almacenar archivos binarios.

Usando el objeto FormData, puede usar una serie de valores clave para simular un formulario completo y luego usar xmlhttprequest para enviar este formulario.

Tema

1) El archivo de entrada carga imágenes y lea la imagen cargada por los usuarios con FileReader;

2) Los datos de la imagen se transmiten al objeto IMG, dibuja IMG al lienzo y luego usa Canvas.todataurl para la compresión;

3) Obtenga los datos de la imagen de formato base 64 comprimido, conviértalo en binario, conéctelo a FormData y finalmente envíe FormData a través de XMLHTTPRequest

 FileeLe.onchange = function () {if (! This.files.length) return; .test (_SimpleFile.Type)) return; // complemento exif.js para obtener iOS Pictures var _orientation; .gettag (esta, 'orientación');} // 1. Lea los archivos, use FileReader para someter el archivo de la imagen. .src; compresión (_img);

 /** * Calcule el tamaño de la imagen, comprime el tamaño de acuerdo con el tamaño * 1. Teléfono móvil de iPhone HTML5 Sube el problema de la dirección de la imagen, use exif.js * 2. Android UC Browser no admite el nuevo blob (),,,,,,,,,,,,,,,,,,), Use blobBuilder* @param {object} _img imagen* @param {número} _ontación información foto Tamaño del objetivo, si la alta altura de la imagen carga la imagen de la imagen, ambas son mayores que la tabla de destino, y comprime el mapa de destino y otra compresión; 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 Temporary width_tempheight = _Imgheight, // El ancho temporal después de zoom o reducción _r = 0; que el gráfico de destino, y la compresión igual se comprime _r = _imgWidth / _GoalWidth; /_imgheight;}} else {if (_imgWidth <_GoalWidth) {// pequeño que _r = _Goalwidth/_imgwidth;} else {// pequeño es menos que _r = __r = __r = _ __r = __goalheight/_ imgheight;} } _tempwidth = math.ceil (_imgwidth * _r); Get ('Canvas-Clip'); Interruptor de problemas de error de dirección (_orientación) {// Disparo de pantalla horizontal de iPhone, en este momento, la tecla de inicio es el caso 3: _degree = 180; del teléfono móvil normalmente) Altura = _imgWidth; Pi/180); = _Canvas.todataurl ('image/jpeg');

 /** * Sube la imagen en nos * @param {objeto} _blog blob formato imagen * @return {void} */function uploadPhoto (_data) {// 4. Obtenga la información de imagen en Canvas //window.atob Will La imagen del formato Base64 se convierte en una cadena binaria; Split (',') [1]; _data.length); no admite nuevo blob (), use 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.netase.com / + _bucketName +/ + _ObjectName +? /Act/taxi? Op = Effect & OrigImGurl = ' + _newurl;

Determine la dirección de la imagen del iPhone: exif

El anterior es la función de carga y carga de desarrollo móvil HTML5 introducida por Xiaobian para lograr el efecto de los datos de simulación. todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de VEVB Wulin!