Exemplos de imagens de compressão de tela e métodos de produção de cartões

Ao criar algumas páginas de atividades, muitas vezes é necessário fazer upload de imagens, e as imagens, o texto gerado e os adesivos também precisam ser gerados em um cartão que os usuários podem manter pressionado para salvar. Este requisito já foi atendido uma vez e foi atendido novamente recentemente. Tudo foi implementado usando canvas. Basta montar um blog. Se houver um método de implementação melhor, vocês podem discuti-lo juntos.

Ao usar a tag de entrada de gravação em html e o tipo é arquivo, você pode acessar o álbum de fotos do seu telefone para selecionar fotos e também pode apoiar a câmera para tirar fotos. Nesse cenário, o tamanho da imagem pode ser maior e exceder o intervalo máximo suportado pelo back-end, causando falha no upload.

 <id de entrada=tipo de arquivo=arquivo>

1. Primeiro obtenha o arquivo de imagem

 var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; console.log(file) // O arquivo selecionado é uma imagem if (file.type.indexOf(image) == 0) { reader.readAsDataURL(file).

2. Agora que obteve o arquivo de imagem, você precisa entender o uso do objeto FileReader em js.

Os objetos FileReader permitem que aplicativos da Web leiam de forma assíncrona o conteúdo de um arquivo (ou buffer de dados brutos) armazenado no computador do usuário

método:

• readAsText: Este método possui dois parâmetros, o segundo parâmetro é o método de codificação do texto e o valor padrão é UTF-8. Este método é muito fácil de entender. O arquivo é lido em modo texto e o resultado da leitura é o conteúdo do arquivo de texto.
• readAsBinaryString: Este método lê o arquivo como uma string binária. Geralmente o transferimos para o backend, e o backend pode armazenar o arquivo por meio dessa string.
• readAsDataURL: Este é o método usado no programa de exemplo. Este método lê o arquivo como uma string começando com data:. plano. Arquivos pequenos aqui geralmente se referem a arquivos em formatos como imagens e HTML. (O método base64 é obtido a partir disso.)

Continue a operação acima. Depois de obter a imagem, você precisa processar e converter o arquivo neste momento.

 var reader = new FileReader(); //Lê o arquivo na página na forma de URL de dados reader.readAsDataURL(file);

Agora que a imagem foi recuperada e convertida, ela pode ser compactada.

 var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; // console.log( file) // O arquivo selecionado é uma imagem if (file.type.indexOf(image) == 0) { var reader = new FileReader(); Leia a página na forma de URL reader.readAsDataURL(file); reader.onload=function(e) { // console.log(this.result) var pre=document.getElementById(pre); this.result ) canvasDataURL(this.result, 100, 0.5) } } }) /* [canvasDataURL compactado pelo canvas] * @params path O formato base64 da imagem* @params targetWidth A largura da imagem compactada* @params qualidade Quanto menor o valor da qualidade da imagem, mais desfocada será a imagem desenhada*/ function canvasDataURL(path, targetWidth, quality) { var img = new Image(); img.src = path img.onload = function () { // var that = this // console.log(that) // Compressão proporcional padrão var w = this.width var h = this.height scale = w / h; w = targetWidth h = targetWidth / scale var quality = quality; // A qualidade da imagem padrão é 0,7 // Gera a tela var canvas = document.createElement('canvas'); ctx = canvas.getContext('2d'); // Criar nó de atributo var anw = document.createAttribute(width); document.createAttribute(height); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); melhor Quanto mais borrada for a imagem desenhada var base64 = canvas.toDataURL('image/jpeg', quality); resultado = documento.getElementById (resultado); resultado.setAttribute (src, base64) } }

É muito simples, então você pode obter a imagem compactada. A partir do código acima, podemos saber que o princípio é que o método toDataURL no canvas pode especificar o formato e a qualidade de compactação da imagem compactada, e compactar as informações do canvas e convertê-las. para codificação base64.

Cena: Combine a imagem recém-comprimida com outra imagem, pressione e segure para salvar.

 function drawCanvas (target) { var canvas = document.querySelector('#myCanvas') var ctx = canvas.getContext('2d') // São os pixels físicos no dispositivo e pixels independentes do dispositivo (dips) Proporção var dp = window.devicePixelRatio || 1 var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1 var proporção = this.dp / this.backingStoreRatio var oldWidth = canvas.width var oldHeight = canvas.height canvas.width = oldWidth * proporção canvas.height = oldHeight * proporção canvas.style.width = oldWidth + 'px' canvas.style.height = oldHeight + 'px' ctx.scale(proporção, proporção) var headerImg = nova imagem() var bgImg = nova imagem() headerImg.src = alvo bgImg.src = '../bg.png' headerImg.onload = (e) => { // Proporção da imagem var rate = headerImg.width / headerImg.height console.log(rate) bgImg.onload = (e) => { ctx.drawImage(headerImg, 10, 30, 50, (50 / rate )) // Imagem de fundo ctx.drawImage(bgImg, 0, 0, 150, 150) ctx.fillText('Incrível', 80, 70) var resultImg = new Image() resultImg.src = canvas.toDataURL('image/png', 1) resultImg.style.width = '100%' var cardImg=document . getElementById(cardImg); cardImg.setAttribute(src, resultImg.src) } }

Obtenha a imagem que acabou de obter e, após carregá-la, desenhe-a na tela. Você também pode adicionar texto, etc. Finalmente, as informações da tela são convertidas para codificação base64 para implementação. Exemplos podem ser praticados por meio de código

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.