Página Inicial>Tutorial de web design>Tutorial HTML

Exemplo de código para compactação de imagem usando canvas

Autor：Eve Cole Data da Última Atualização：2025-02-01 10:36:02

Ao fazer o reconhecimento do cartão de identificação no projeto, é necessário transmitir a codificação da imagem no formato base64, mas as fotos tiradas pelo celular são muito grandes e convertê-las para base64 é simplesmente terrível, então encontrei uma solução.

Pontos de conhecimento envolvidos

  • O evento onchange é acionado após o upload do arquivo.
  • Use o atributo files para obter o objeto de arquivo enviado
  • readAsDataURL é usado para converter para codificação base64
  • Distinguir entre tela e ambiente de pintura:
    • Canvas: Correspondente ao cvs no código, você pode definir a largura e altura da tela;
    • Ambiente de pintura: correspondente ao ctx no código, você pode definir fillStyle, fillRect, etc.;
  • Use o método drawImage() que vem com o canvas para desenhar imagens no canvas.
  • Se você deseja obter a base64 da imagem compactada, você pode usar o método toDataURL() que vem com o canvas.
Código completo 

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>Documento</title></head><body> <input type=file onchange=loadImg(this)> <hr> <div>800×449, 544KB</div> <img src= <hr> <div>400×224, 157KB</div> <canvas></canvas> <script> // Função de upload de imagem loadImg(me) { deixe img = document.querySelector('img'); deixe cvs = document.querySelector('canvas'); me.files[0]; // Obtém o objeto do arquivo // Compacta apenas a imagem enviada se ela for maior que 500 KB if (file && (file.size / 1024 > 500)) { let reader = new FileReader() reader; .readAsDataURL( file); // Converte para codificação base64 reader.onload = function (e) { let naturalBase64 = e.target.result; Codificação, esta é a imagem original img.src = naturalBase64; img.onload = function () { let ratio = img.naturalWidth / img.naturalHeight // Obtém a proporção da imagem original, para compactá-la em proporção igual cvs. largura = 400; cvs .altura = cvs.largura / proporção; ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // Desenhar na tela // Base64 da nova imagem após compactação let zipBase64 = cvs.toDataURL(); </body></html>

renderizações

Sobre o tamanho da imagem compactada

Aqui está um método pronto para uso. baseStr é uma codificação Base64 completa, que inclui.

base64

Código: 

 função calcBase(baseStr){ var tag = 'base64,'; baseStr = baseStr.substring(baseStr.indexOf(tag)+tag.length); 1?baseStr.substring(0,eqTagIndex):baseStr var strLen = baseStr.length; - (strLen / 8) * 2; console.log(tamanho do arquivo: + (fileSize / 1024).toFixed(1) + 'KB');}

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.

Artigos Relacionados