Exemplo de código para Canvas e compactação de imagem

Já escrevi um artigo sobre processamento de imagens do Canvas. Hoje falaremos sobre como usar o Canvas para compactar imagens.

A seguir, explicarei o processo específico de compactação de imagens do Canvas com exemplos específicos.

1. Obtenha arquivos locais

 <!--HTML--><input type=file id=choose-img />

 // JSvar escolhaImg = document.getElementById(choose-img); escolhaImg.onchange = function(e){ var file = this.files[0]; sequência, a mesma abaixo)};

É muito simples, basta pegar o arquivo local através do botão com tipo arquivo.

 <!--HTML--><div id=resultado></div>

 // JSvar result = document.getElementById(result); // Usado para exibir resultados de saída de imagem ou prompts de erro if(/image/.test(file.type)){ // Determina se o tipo de arquivo é uma imagem // ... }else{ result.innerHTML = '<span style=color: red;>Tipo de arquivo errado! </span>';}

 var img = new Image(), // Cria um objeto de imagem para colocar a imagem original reader = new FileReader();reader.readAsDataURL(file); leitor .onload = function(){ img.src = this.result; Atribua diretamente a string base64 da imagem a document.body.insertBefore(img,chooseImg) no src do objeto Image; // Insira a imagem de saída antes do botão de arquivo img.onload = function(){ // ... }; };

 var canvas = document.createElement('canvas');canvas.width = img.clientWidth;canvas.height = img.clientHeight;var context = canvas.getContext('2d');

Nota: O tamanho da tela é igual à largura e altura da imagem de entrada.

 context.drawImage(img,0,0,canvas.width,canvas.height);

 <!--HTML-->Taxa de compactação de imagem: <input id=rate type=number min=0 max=100 /> %

 // JSvar rate = document.getElementById(rate).value || 100; // Insira a taxa de compactação da imagem, o padrão é 100% var imgUrl = canvas.toDataURL(file.type,rate/100); parâmetro é o tipo de imagem de saída e o segundo é a taxa de compactação result.innerHTML = 'Após compactação: <img src='+ imgUrl +' />'; Exibe a imagem compactada no resultado img.style.display = 'none' // Oculta a imagem original;

Produza a imagem desenhada no Canvas no formato base64 novamente.

 <!--HTML-->Taxa de compactação de imagem: <input id=rate type=number min=0 max=100 /> %<input type=file id=choose-img /><div id=result></div >

 // JSvar escolhaImg = document.getElementById(choose-img), resultado = document.getElementById(result);chooseImg.onchange = function(e){ var file = this.files[0]; arquivo.type)){ var img = new Image(), leitor = novo FileReader(); function(){ img.src = this.result; document.body.insertBefore (img,chooseImg = img.onload = function(){ var canvas = document.createElement('canvas'); ; canvas.height = img.clientHeight; var context = canvas.getContext('2d'); context.drawImage(img,0,0,canvas.width,canvas.height); result.innerHTML = 'Após compactação: <img src='+ imgUrl +' />'; img.style.display = 'none'; } } } else{ result.innerHTML = '<span style=color: red;>Tipo de arquivo errado! </span>'; }};

Após o teste, descobriu-se que o efeito de compactação de imagem no formato JPEG é melhor por meio do Canvas, enquanto o efeito de compactação PNG não é óbvio e às vezes fica maior.

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.