Função de upload de compactação de imagem para desenvolvimento móvel html5

A atividade H5 é muito comum, um formulário é permitir que os usuários enviem fotos para participar. Os usuários do Terminal Mobile Upload. Se o upload for enviado diretamente, ele consome muito tráfego e a experiência não é boa. Portanto, antes de fazer o upload, você precisa comprimir a área local.

O distrito de Xiaobai deve vender

Se não houver um conceito de upload de imagens móveis, você precisará complementar os três conceitos de FileReader, Blob e FormData.

definição

Usando o objeto FileReader, o aplicativo da Web pode ser assíncrono para ler o arquivo (ou o buffer de dados brutos) armazenado no computador do usuário.

método

Procedimento de processamento de eventos

usar

 Var fileReader = novo fileReader ();

O BLOB (objeto grande binário), um objeto binário, é um contêiner que pode armazenar arquivos binários.

Usando o objeto FormData, você pode usar uma série de valores -chave para simular um formulário completo e, em seguida, usar o XMLHTTPREQUEST para enviar este formulário.

Tópico

1) O arquivo de entrada carrega imagens e leia a imagem enviada por usuários com o FileReader;

2) Os dados da imagem são transmitidos para o objeto IMG, desenham img para tela e usa Canvas.todataurl para compactação;

3) Obtenha os dados da imagem de formato Base64 compactada, transforme -os em binário, conecte -se ao formData e finalmente envie o formData através do XMLHTTPREQUEST

 Fileele.onchange = function () {if (! This.files.length) return; .test (_simplefile.type)) retornar; .gettag (this, 'orientação');} // 1. Leia os arquivos, use o FileReader para subjugar o arquivo de imagem. .src; compactar (_img);

 /** * Calcule o tamanho da imagem, compacte o tamanho de acordo com o tamanho * 1. Use blobbuilder* @param {object} _img imagem* @param {número} _ontation Informações da foto* @return {string} imagem imagens no formato Base64*/função compact (_img, _orientation) {// 2. Calcule a largura do valor do Tamanho do alvo, se a alta altura da imagem carregar a imagem da imagem, ambos são maiores que o gráfico de destino e comprime o mapa de destino e outras compressão; Var _goalwidth = 750, // alvo width_goiaHeight = 750, // altura altura_imgwidth = _img.naturwidth, // imagem width_imgheight = _img.naturalHeight, // figura altion_tempwi dth = _imgwidth; A largura temporária após o zoom ou redução _r = 0; do que o gráfico de destino e a compactação igual é compactada _r = _imgwidth / _goalwidth; /_imgheight;}} else {if (_imgwidth <_goalwidth) {// pequeno que _r = _goalwidth/_imgwidth;} else {// pequeno é menor que _r = __r = __r = _ __r = __GealHeight/_ _MIGH; } _tempwidth = math.ceil (_imgwidth * _r); Get ('Canvas-Clip'); Introdução ao problema de direção (_orientação) {// iPhone Horizontal Screen Shooting, neste momento a chave da casa é o caso 3: _Degree = 180; do telefone celular normalmente) Caso 6: _Canvas.width = _imghEight; Altura = _imgwidth; Pi/180); = _Canvas.todataurl ('imagem/jpeg');

 /** * Carregue a imagem para nos * @param {object} _blog Blob format Picture * @return {void} */function uploadphoto (_data) {// 4. Obtenha as informações da imagem em canvas //window.atob. A imagem do formato Base64 é convertida em uma string binária; Split (',') [1]; _data.length); não suporta o novo blob (), use o Blobbuilder var _blob; Window.webkitblobbuilder ||. (); $ requestdwrbyget, param: [_suffix, '' ',' ',' ' ||! '); ); (_xhr.readyState === 4) {if (_xhr.status> = 200 && _xhr.status <300) || _xhr. _bucketname +/ +_objectname +? /TaxIU? Op = Efeito e Origimgurl = ' + _newurl;

Determine o iPhone Shooting Picture Direction: Exif

O acima é o HTML5 Mobile Development Picture Compression and Upload Função introduzida pela Xiaobian para obter o efeito do login de dados de segundo plano. Espero que seja útil para todos. todos a tempo. Muito obrigado pelo seu apoio ao site VevB Wulin!