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.
Utilice lienzo para comprimir imágenesCuando 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:
| nombre del método | parámetro | describir |
|---|---|---|
| abortar | ninguno | interrumpir la lectura |
| leer como cadena binaria | archivo | código binario |
| leer como URL de datos | archivo | Leer archivo como DataURL |
| leer como texto | archivo, [codificación] | Leer archivo como texto |
| evento | describir |
|---|---|
| abortar | Activado por interrupción |
| error | abortar |
| cargar | Se activa cuando la lectura del archivo se completa correctamente |
| cargando | Activado por la finalización de la lectura, independientemente del éxito o el fracaso. |
| inicio de carga | Se dispara cuando comienza la lectura. |
| en progreso | Lectura |
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.
Hacer tarjetas usando lienzoEscena: 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.