Exemplo de código para HTML5 usando canvas para compactar imagens

Há dois dias, fiz uma função para converter imagens em base64 para upload. Descobri que se a base64 da imagem for muito grande, a solicitação ficará muito lenta e atingirá o tempo limite, então pensei em compactar a imagem. antes de fazer o upload e, em seguida, enviá-lo para o plano de fundo, o que pode melhorar muito a eficiência. Aqui estão algumas armadilhas encontradas ao usar o canvas para compactar imagens. O código completo será fornecido no final do artigo.

A primeira armadilha é que ao compactar a imagem, a largura e a altura da imagem em si não são obtidas, sendo fornecidas uma largura e altura fixas de 600 * 480. Porque está no celular, ao enviar a imagem, a imagem. tem vários megabytes de tamanho, então não há problema. O problema ocorreu ao modificar o avatar. As imagens carregadas durante o teste eram todas pequenas, e então as imagens compactadas não foram exibidas completamente, e a maioria delas estava em branco. e altura da imagem.

A segunda armadilha A maneira de resolver a primeira armadilha é obter a largura e a altura da própria imagem após o carregamento (onload) e, em seguida, atribuí-la à tela. A armadilha é que o carregamento da imagem é assíncrono; quando você retorna, o que é retornado pode ser indefinido em vez da base64 compactada que você precisa. A solução aqui é criar uma nova promessa, retornar o resultado resolve() e obter o resultado ao chamar .then().

• canvas's toDataURL('image/png', 0.9); Converte a imagem desenhada pelo canvas para base64.
• Especifique um tamanho máximo. Se a largura e a altura da imagem forem maiores que esse tamanho, o lado maior será dimensionado e o outro lado será definido de acordo com a proporção da imagem e, em seguida, definido para a tela.

miniImage.js

 exportar função assíncrona padrão miniSize(imgData, maxSize = 200*1024){ // const maxSize = 200 * 1024; .log('----------------Imagem compactada------------------'); document.createElement('canvas'); deixe img = new img.src = imgData.url; deixe ctx = canvas.getContext('2d'); 'load', function(){ //Tamanho original da imagem let originWidth = this.width; let originHeight = this.height; 400, maxHeight = 400; // Tamanho alvo let targetWidth = originWidth, targetHeight = originHeight; // O tamanho da imagem excede o limite de 400x400 if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { // Mais amplo, limita o tamanho de acordo com a largura targetWidth = maxWidth; = Math.round(maxWidth * (originHeight / originWidth)); ctx.drawImage(img, 0, 0, targetWidth, targetHeight); canvas.toDataURL('imagem/png', 0.9); resolve(base64 }, falso })) }}

Chamar:

teste.js

 onChangeImg = async (arquivos, tipo, índice) => { let previous = this.props.imagePicker.files; if(type === add) { let result = miniSize(files[files.length-1]); Use .then() para chamar await result.then(res => { previous.push({url: res}); }else if(type === remove) { anterior.splice(index,1 } aguardar this.props.dispatch({ tipo: 'imagePicker/saveImage', carga útil: { arquivos: anterior } }) }

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.