Ejemplos de imágenes de compresión de lienzos y métodos de producción de tarjetas.

Al crear algunas páginas de actividades, a menudo es necesario cargar imágenes, y las imágenes, el texto generado y las pegatinas también deben generarse en una tarjeta que los usuarios pueden mantener presionada para guardar. Este requisito se cumplió una vez antes y se cumplió nuevamente recientemente. Todo se implementó mediante lienzo. Simplemente cree un blog. Si existe un método de implementación mejor, pueden discutirlo juntos.

Cuando usa la etiqueta de entrada de escritura en html y el tipo es archivo, puede abrir el álbum de fotos de su teléfono para seleccionar fotos y también puede admitir la cámara para tomar fotos. En este escenario, el tamaño de la imagen puede ser mayor y exceder el rango máximo admitido por el backend, lo que provoca que la carga falle.

 <id de entrada=tipo de archivo=archivo>

1. Primero obtenga el archivo de imagen.

 var eleFile = document.querySelector('#archivo'); var lector = new FileReader() eleFile.addEventListener('cambio', función (evento) { archivo = evento.target.files[0]; console.log(archivo) // El archivo seleccionado es una imagen if (file.type.indexOf(image) == 0) { lector.readAsDataURL(file } });

2. Ahora que ha obtenido el archivo de imagen, debe comprender el uso del objeto FileReader en js.

Los objetos FileReader permiten que las aplicaciones web lean de forma asincrónica el contenido de un archivo (o búfer de datos sin procesar) almacenado en la computadora del usuario.

método:

• readAsText: este método tiene dos parámetros, el segundo parámetro es el método de codificación del texto y el valor predeterminado es UTF-8. Este método es muy fácil de entender. El archivo se lee en modo texto y el resultado de la lectura es el contenido del archivo de texto.
• readAsBinaryString: este método lee el archivo como una cadena binaria. Por lo general, lo transferimos al backend, y el backend puede almacenar el archivo a través de esta cadena.
• readAsDataURL: este es el método utilizado en el programa de ejemplo. Este método lee el archivo como una cadena que comienza con datos:. La esencia de esta cadena es la URL de datos es una forma de incrustar archivos pequeños directamente en el documento. plan. Los archivos pequeños aquí generalmente se refieren a archivos en formatos como imágenes y html. (El método base64 se obtiene a partir de esto).

Continúe con la operación anterior. Después de obtener la imagen, debe procesar y convertir el archivo.

 var lector = new FileReader(); //Lee el archivo en la página en forma de URL de datos lector.readAsDataURL(archivo lector.onload=función(e) { console.log(lector) }

Ahora que la imagen ha sido recuperada y convertida, ahora se puede comprimir.

 var eleFile = document.querySelector('#file'); var lector = new FileReader() eleFile.addEventListener('cambiar', función (evento) { archivo = event.target.files[0]; // console.log( file) // El archivo seleccionado es una imagen if (file.type.indexOf(image) == 0) { var Reader = new FileReader() // Convierte el archivo a datos. Lea la página en formato URL lector.readAsDataURL(file); lector.onload=function(e) { // console.log(this.result) var pre=document.getElementById(pre.setAttribute(src, this.result ) canvasDataURL(this.result, 100, 0.5) } } }) /* [canvasDataURL comprimido por lienzo] * @params ruta El formato base64 de la imagen* @params targetWidth El ancho de la imagen comprimida* @params calidad Cuanto menor sea el valor de calidad de la imagen, más borrosa será la imagen dibujada*/ function canvasDataURL(path, targetWidth, calidad) { var img = new Image(); img.src = ruta img.onload = function () { // var that = this // console.log(that) // Compresión proporcional predeterminada var w = this.width var h = this.height scale = w / h; w = targetWidth h = targetWidth / escala var calidad = calidad; // La calidad de imagen predeterminada es 0.7 // Generar lienzo var canvas = document.createElement('canvas'); ctx = canvas.getContext('2d'); // Crear nodo de atributo var anw = document.createAttribute(width); anw.nodeValue = w; document.createAttribute(height); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(this, 0, 0, w, h); mejor Cuanto más borrosa sea la imagen dibujada var base64 = canvas.toDataURL('image/jpeg', calidad); resultado=document.getElementById(resultado); resultado.setAttribute(src, base64) } }

Es muy simple, por lo que puede obtener la imagen comprimida. Del código anterior, podemos saber que el principio es que el método toDataURL en el lienzo puede especificar el formato y la calidad de compresión de la imagen comprimida, comprimir la información del lienzo y convertirla. a la codificación base64.

Escena: combine la imagen recién comprimida con otra imagen, mantenga presionada para guardar.

 function drawCanvas (target) { var canvas = document.querySelector('#myCanvas') var ctx = canvas.getContext('2d') // Son los píxeles físicos en el dispositivo y los píxeles independientes del dispositivo (inmersiones) Relación var dp = window.devicePixelRatio || 1 var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || oldWidth * ratio canvas.height = oldHeight * ratio canvas.style.width = oldWidth + 'px' canvas.style.height = oldHeight + 'px' ctx.scale(ratio, ratio) var headerImg = new Image() var bgImg = nueva Imagen() headerImg.src = destino bgImg.src = '../bg.png' headerImg.onload = (e) => { // Relación de aspecto de la imagen var rate = headerImg.width / headerImg.height console.log(rate) bgImg.onload = (e) => { ctx.drawImage(headerImg, 10, 30, 50, (50 / rate )) // Imagen de fondo ctx.drawImage(bgImg, 0, 0, 150, 150) ctx.fillText('Impresionante', 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) } }

Obtenga la imagen que acaba de obtener y, una vez cargada, dibújela en el lienzo. También puede agregar texto, etc. Finalmente, la información del lienzo se convierte a codificación base64 para su implementación. Los ejemplos se pueden practicar a través del código.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.