Este artículo presenta cómo convertir la ruta absoluta de una imagen en un objeto de archivo en HTML5 y compartirlo con todos. Los detalles son los siguientes:
Para convertir la ruta absoluta de la imagen a codificación base64, consulte este artículo
Primero comprendamos los puntos de conocimiento básicos:
1. Comprenda el objeto FileList y el objeto de archivo en HTML5.En HTML5, un objeto FileList representa una lista de archivos seleccionados por el usuario. Al agregar el atributo multipe, se pueden seleccionar varios archivos a la vez dentro del control de archivos. Cada archivo seleccionado por el usuario en el control es un objeto de archivo y el objeto FileList es una lista de objetos de archivo. Representa todos los archivos seleccionados por el usuario. Primero veamos una demostración simple para ver qué atributos tiene el objeto de archivo. El siguiente código:
<!DOCTYPE html><html> <head> <title>sistema de archivos:URL</title> </head> <body> <div> <label>Seleccione:</label> <input type='file' multiple id= archivo /> <tipo de entrada=valor del botón=Carga de archivo onClick=showFile() /> </div> <script> función showFile() { var archivos = document.getElementById('archivo').files //; Devuelve todos los archivos seleccionados para (var i = 0, ilen = files.length; i < ilen; i++) { // Imprime la información de un único objeto de archivo console.log(files[i]); la información es la siguiente: Archivo { lastModified: 1457946612000 lastModifiedDate: lunes 14 de marzo de 2016 17:10:12 GMT+0800 (CST) {} nombre: test.html tamaño: 796 tipo: texto/html webkitRelativePath: */ /* Si se carga una imagen, se devolverá la siguiente información: Archivo { lastModified: 1466907500000 lastModifiedDate: Sun Jun 26 2016 10: 18:20 GMT+0800 (CST) {} nombre: a.jpg tamaño: 23684 tipo: image/jpeg webkitRelativePath: } */ /* Por lo tanto, si necesita determinar si el archivo cargado es un archivo de imagen, puede juzgar según el tipo de la siguiente manera: var file = files[i]; /image// /w+/.test(file.type)) { console.log('Este archivo no es un archivo de imagen'); else { console.log('Este archivo es un archivo de imagen'); Pero si solo desea transferir imágenes, puede agregar un atributo aceptar=imagen/* al control de imagen. Podemos escribir el código de la siguiente manera: <input type='file' multiple Accept = 'image/gif,image/jpeg; ,imagen/ jpg,imagen/png' /> */ } } </script> </body></html> 2. Comprender los objetos BlobPuntos clave: en HTML5, se agrega un nuevo objeto Blob para representar los datos binarios originales. De hecho, el objeto de archivo también hereda el objeto Blob.
El objeto Blob tiene dos atributos: el atributo de tamaño representa la longitud en bytes de un objeto Blob y el atributo de tipo representa el tipo MIME del Blob. Si es un tipo desconocido, se devuelve una cadena vacía.
Por favor mire el siguiente código:
<!DOCTYPE html><html> <head> <title>sistema de archivos:URL</title> </head> <body> <div> <label>Seleccione archivo:</label> <input type=file id=file / > <tipo de entrada=valor del botón=Mostrar información del archivo onClick=showFileType() /> <p>Longitud en bytes del archivo: <span id=size></span></p> <p>Tipo de archivo: <span id=type></span></p> </div> <script> function showFileType() { var file // Obtener el primer archivo seleccionado por el usuario file = document.getElementById('file').files[ 0]; var size = document.getElementById('size'); var type = document.getElementById('type'); // Muestra la longitud del archivo en bytes size.innerHTML = file.size; Mostrar el tipo de archivo type.innerHTML = file.type; // Abra la consola para ver el objeto de archivo devuelto console.log(file) } </script> </body></html>Nota: Blob y File se pueden usar al mismo tiempo, y FileReader se puede usar para leer datos de Blob.
La siguiente es una dirección de imagen de ruta absoluta que se convierte en una imagen codificada en base64 y luego la imagen codificada en base64 se convierte en un objeto blob. El código es el siguiente:
<!DOCTYPE html><html> <head> <title>Convertir datos de URL de imagen base64 a Blob</title> </head> <body> <script> /** * Convertir datos de URL de imagen base64 para Blob * @param urlData * datos de imagen base64 expresados en modo URL */ function convertBase64UrlToBlob(base64){ var urlData = base64.dataURL tipo; base64.type; var bytes = window.atob(urlData.split(',')[1]); //Elimina el encabezado de la URL y conviértelo a byte //Maneja las excepciones y convierte el código ascii menor que 0 a mayor que 0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : type}); /* * Convierte la dirección de ruta absoluta de la imagen a codificación base64 de la siguiente manera: */ function getBase64Image(img) { var lienzo = document.createElement(lienzo); lienzo.ancho = img.ancho; lienzo.altura = img.altura = canvas.getContext(2d); ctx.drawImage(img, 0, 0, img.width, img.height var text = img.src.substring(img.src.lastIndexOf(.)+1).toLowerCase(); ; var dataURL = lienzo.toDataURL(imagen/+ext); return { dataURL: dataURL, tipo: imagen/+ext); }; } var img = https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg; var imagen = nueva imagen(); (){ var base64 = getBase64Image(imagen) console.log(base64); La información de impresión es la siguiente: { dataURL: data:image/png;base64,xxx type: image/jpg } */ var img2 = convertBase64UrlToBlob(base64.log(img2); : Blob {tamaño: 9585, tipo: imagen/jpg} */ } </script> </body></html>Nota: En HTML5, se agrega un nuevo objeto Blob para representar los datos binarios originales. De hecho, el objeto de archivo también hereda el objeto Blob. Por lo tanto podemos usar la dirección absoluta de la imagen para convertirla en un objeto de archivo.
Por lo tanto, podemos usar la dirección absoluta de la imagen para convertirla en un objeto de archivo. Para una demostración detallada, puede ver el control de carga de imágenes en mi git. El complemento primero admite la carga de imágenes y, de repente, descubrí que. cuando voy a la página de edición, necesito mostrar la imagen predeterminada. Al mismo tiempo, se admite continuar cargando nuevas imágenes cuando se muestran imágenes de forma predeterminada, o eliminar todas las imágenes. Me da la dirección absoluta de la imagen, así que me he estado preguntando cómo convertir la dirección absoluta de la imagen en un objeto de archivo. Si no la convierto en un objeto de archivo, cuando uso este código, var lector =. new FileReader(); informará un error, por lo que primero puede usar el objeto blob del que hablamos anteriormente para convertirlo en un objeto blob, y luego puede usar el objeto de operación de archivo fileReader.
Para obtener un código detallado, consulte el control de carga de imágenes en mi git (https://github.com/tugenhua0707/html5UploadImage. Para conocer el efecto, consulte https://tugenhua0707.github.io/html5UploadImage/index.html).
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.