Prefacio: Cuando creamos páginas web, a menudo necesitamos cargar imágenes. Podemos elegir imágenes o tomar fotos para cargar. Si simplemente usamos <input type=file/> , aunque este método también puede lograr la función, la experiencia del usuario puede mejorar. Es un poco diferente, por lo que este artículo registra el uso de css + js para implementar las funciones de vista previa y carga comprimida después de seleccionar la imagen. Parte de la información proviene de Internet y se registra y organiza aquí.
Vista previa del efecto:
1.Crear index.html<!DOCTYPE html><html> <head> <meta charset=UTF-8> <meta name=viewport content=ancho=ancho del dispositivo, escala inicial=1.0, escala máxima=1.0, escalable por el usuario=no> <title>Tomar fotos y subirlas</title> <link rel=stylesheet href=index.css/> <script type='text/javascript' src='index.js' charset='utf-8'></script> </head> <body> <form id=mainForm> <div class=content> <div class=label>Tarjeta de identificación</div> <div class=img-area > <div clase=contenedor> <tipo de entrada=id de archivo='id-cara' nombre='cara' aceptar=imagen/* /> <div id='cara-empty-resultado'> <img style='width:4rem' src=https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true <p>Foto frontal de la tarjeta de identificación</p> </div > <img style='ancho: 100%' id='face-result'/> </div> <div class=contenedor style='margin-top:0.5rem;'> <tipo de entrada=id de archivo='id-back' nombre='back' aceptar=imagen/* /> <div id='back-empty-result'> <img style='width:4rem' src=https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true <p>Foto invertida del documento de identidad</p> </div> <img style='width: 100%' id='back-result'/> </div> </div> </div> <div class = btn> enviar</div> </form> </body></html>2.Crear index.css
cuerpo{ margen: 0}.content{ relleno:0.5rem; pantalla: flex; align-items: center; border-bottom: 1px #999 solid}.label{ width:5rem;}.img-area{ flex:1} .container{ color de fondo:#e7e7e7; posición: relativa;}.container div{ text-align: center padding:0.5rem; 0}.entrada del contenedor{ opacidad:0; filtro:alfa(opacidad=0); alto: 100%; ancho: 100%; posición: superior: 0; índice z: 0; p{ tamaño de fuente: 0.9rem; color:#999}.btn{ color de fondo: #4363ab; color: #fff; relleno: 0,5rem 1rem; ancho: 80%; radio del borde: 0,2rem; margen: 2rem; peso de fuente: 600; 3.Crear index.js window.onload=function(){ document.getElementById(id-face).addEventListener(change, function(){ onFileChange(this,face-result,face-empty-result) }); .addEventListener(cambio, función(){ onFileChange(este,resultado-regreso,resultado-regreso-vacío) }); document.getElementsByClassName(btn)[0].addEventListener(click, function(){ submit(); });};/** * Procesamiento cuando se selecciona la imagen* @param {*} elemento de archivo de entrada fileObj * @param {*} el //El ID del elemento utilizado para mostrar la imagen cuando se selecciona * @param {*} btnel //El ID del área del botón que se muestra cuando la imagen no está seleccionada */función onFileChange(fileObj,el,btnel){ var windowURL = window.URL || var dataURL = imgObj(el); .display=bloquear si (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); imgObj.src=dataURL } else { dataURL = imgObj.style.filter = progid:DXImageTransform.Microsoft.AlphaImageLoader; (método de tamaño = escala); imgObj.filters.item(DXImageTransform.Microsoft.AlphaImageLoader).src = dataURL }}/** * Devuelve los datos en formato base64 después de comprimir la imagen* @param {*} elemento img de imagen* @param {*} ancho después de la compresión Ancho de imagen* @param {*} alto Alto de imagen comprimida* @param {*} qua //Calidad de imagen 1-100 */función compressImageTobase64(imagen,ancho,alto,qua){ var calidad = qua ? qua / 100: 0.8; var lienzo = document.createElement(lienzo), ctx = lienzo.getContext('2d'); h = imagen.naturalHeight; lienzo.ancho = ancho||w; lienzo.alto = alto||h; ctx.drawImage(imagen, 0, 0, w, h, 0, 0, width||w, height||h); var data = canvas.toDataURL(image/jpeg, return data;}//Enviar); function enviar(){ //1. Envío del formulario //document.getElementById(mainForm).submit() //2. face_data=compressImageTobase64(document.getElementById(face-result),200,100,90); var back_data=compressImageTobase64(document.getElementById(back-result),200,100,90); ,cara_datos); formData.append(back,back_data); //es necesario introducir jQuery $.ajax({ url:/address, tipo: 'POST', caché: false, datos: formData, timeout:180000, ProcessData: false, contentType: falso, éxito: función (r) {}, error: función (r) {}});}Código fuente: dirección de Github
ResumirLo anterior es el html + css + js introducido por el editor para implementar la función de tomar fotografías, obtener una vista previa y cargar imágenes. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor lo hará. Responderte a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!