1. La segunda forma se llama URL de datos , que permite incrustar archivos pequeños en línea en HTML/CSS, por ejemplo:

 <img src="data:image/png;base64,iVBORw0KGgoAAA ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU 5ErkJggg==" alt="Red dot" />

este método puede reducir efectivamente las solicitudes de red durante el proceso de carga de la página web.

2. En las siguientes situaciones, la URL de datos es aplicable:

• incrustar archivos pequeños en html para reducir los requisitos
• incrustar todos los activos en un solo html para fines de archivo
• recurso de carga generado dinámicamente por el servidor

3. La forma base64 es solo URL de datos, además de estos dos métodos:

• La imagen SVG se puede incrustar directamente en HTML mediante la etiqueta <svg>
• La imagen también se puede representar dinámicamente usando la API <canvas>

4. Te recomiendo un libro The definitive guide to HTML5 .

En primer lugar, si desea mostrar una imagen en la página web, tenemos 2 formas de hacerlo.

1. Establecer la URL web de la imagen en la propiedad img
2. Establecer código binario en la propiedad img

La opción 1 se usa cuando ha almacenado una imagen en la carpeta de su servidor como un archivo

La opción 2 se usa cuando ha almacenado una imagen como base64 binaria en su base de datos, por lo que la recupera solo como código binario o, de lo contrario, ha creado una imagen a partir de su código binario y luego la ha configurado según la opción 1

Para responder tu pregunta

1. Es básicamente lo mismo desde el lado del servidor, excepto por los encabezados y la información que el navegador podría enviar, mientras que en la búsqueda tienes control total sobre los encabezados.
2. El método de búsqueda podría usarse para parámetros más flexibles o adicionales que requieran solicitudes o transferencias seguras que podría implementar en su servidor. Por ejemplo, solicitar una solicitud posterior que tenga un encabezado o cuerpo que contenga ciertos datos para permitir la transferencia de imágenes... o para transferencias flexibles, como datos que podrían colocarse en fragmentos que luego podría ensamblar y manipular antes de presentarlos.
3. Usar base64 es casi lo mismo que binario, aunque se usa para transferir imágenes/datos a través de medios diseñados para transferir texto. Esto se debe a que base64 usa números y letras ascii para representar cualquier dato.

Aquí puede ver una imagen generada a partir de caracteres de cadena base64, sin ningún enlace

 <img style="width:64px; height:64px;" src="data:image/png;base64,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"></img>

Esto también es útil para incrustar la imagen directamente en el código como texto, pasarla como un parámetro de URL o incluso puede colocar la imagen en un archivo JSON . En algunos casos, también funciona mejor que la imagen binaria con compresión como gzip.

estrecho al punto. Básicamente, debe buscar la imagen en lugar de agregar la fuente de URL en el html cuando no desea que las personas vean dónde está alojada su imagen. si hago clic derecho en la imagen y tienes la url directamente en la etiqueta img, literalmente, err body podrá descargar la imagen, y no solo eso, si juego con los posibles parámetros que podría tener, no solo podría obtener el imagen, sino también obtener otras imágenes. así que si no quieres exponer dónde está tu foto, puedes " ocultarla ".

hay 4 formas de obtener una imagen

• html
• CSS
• gota
• base64

pero esas 4 formas se pueden separar en dos grupos.

• manejado por el navegador

  • html
  • CSS
  • base64 ... tipo de

• manejado por ti

  • gota
  • base64 ... tipo de

el primer grupo no es relevante ya que el navegador eliminará la imagen cuando no la necesite, la mostrará cuando la necesite y más cosas.

¿Por qué base64 podría incluirse en ese grupo? porque si la imagen ya no la necesita, el navegador limpia la memoria utilizada por ella. por lo tanto, solo tiene que analizar el binario en base64 y el navegador liberará cualquier recurso utilizado por la imagen, pero, por otro lado, usted administra y maneja completamente los blobs. Entonces, si no libera los recursos utilizados por la imagen, la memoria utilizada, en otras palabras, no podrá ser utilizada por algún otro proceso/programa/aplicación, probablemente esté pensando por qué se prefiere blob sobre base64.

BLOB significa Objeto grande binario, que podría ser cualquier cosa: texto, imágenes, video, código ejecutable, bytes aleatorios, etc. La mayoría de las bases de datos tienen un tipo BLOB especial que permite almacenar este tipo de datos.

Base64 es una codificación que le permite representar cualquier dato como texto sin formato. Se puede mostrar fácilmente en la pantalla y es útil en casos en los que podría ser difícil trabajar con datos binarios. Por ejemplo, podría copiar/pegar Base64 en el campo de texto aquí, pero no podré hacerlo con datos binarios. Además, la codificación Base64URL se usa a menudo en las URL HTTP.

no solo se expone la fuente de tu imagen, sino que también se vuelve un 30 % más grande/pesada

 const fileSelect = document.getElementById("fileSelect"), fileElem = document.getElementById("fileElem"), fileList = document.getElementById("fileList"); fileSelect.addEventListener("click", function (e) { if (fileElem) { fileElem.click(); } e.preventDefault(); // prevent navigation to "#" }, false); fileElem.addEventListener("change", handleFiles, false); function handleFiles() { if (!this.files.length) { fileList.innerHTML = "<p>No files selected!</p>"; } else { fileList.innerHTML = ""; const list = document.createElement("ul"); fileList.appendChild(list); for (let i = 0; i < this.files.length; i++) { const li = document.createElement("li"); list.appendChild(li); const image = document.createElement("img"); image.src = URL.createObjectURL(this.files[i]); image.onload = function() { image.setAttribute("src", this.result) URL.revokeObjectURL(this.result); } li.appendChild(img); const info = document.createElement("span"); li.appendChild(info); } } }

 <input type="file" id="fileElem" multiple accept="image/*" style="display:none"> <button type="button" id="fileSelect">Select some files</button> <div id="fileList"> <p>No files selected!</p> </div>

si ejecuta el ejemplo y hace clic con el botón derecho en las imágenes, verá una URL creada, intente abrirla en otra pestaña y verá que no se puede acceder a la imagen

Respuesta directa

1. Sí, el servidor puede enviar cualquier tipo de datos (cualquier cosa es solo una secuencia binaria de números, incluso texto y caracteres). Es el cliente el que trata de dar sentido al contenido, normalmente siguiendo ciertos estándares.
2. Si no necesita manipular la imagen, le sugiero que evite cualquier solicitud, ya que el navegador puede hacerlo por usted. Tenga en cuenta que solo fetch apenas está sujeto a CORS porque no envía cookies de origen cruzado (consulte MDN: uso de fetch ). Si necesita más control, puede usar XMLHTTPRequest . El uso de blob se hereda de los antiguos enfoques web, aquellos tiempos en los que ArrayBuffer no se inventó y era el único envoltorio para datos binarios en los entornos web. Todavía es compatible por muchas razones.
3. ¡En realidad menos de lo que piensas (solo 1)! Revisa la explicación...
4. Los recursos de imagen dependen en gran medida del tipo de procesamiento que necesite... ¿Solo mostrar una imagen? Los trucos de MDN y CSS están llenos de consejos, solo necesitas buscarlos. Si desea procesar una imagen en su lugar, debe analizar más a fondo los elementos del lienzo y los recursos habituales son escasos o casi relacionados con la creación de juegos (por razones obvias), MDN y algo en CSS-trucos para recursos.

Explicación

¿Qué es una imagen?

Creo que tienes un sesgo hacia el concepto de un navegador que muestra una imagen.

Entonces, ¿qué es realmente una imagen? datos binarios.

Prácticamente, solo hay una forma en que su navegador (o su computadora en general) muestre una imagen, es tener una matriz de bytes que es una vista plana de los píxeles de su imagen. Entonces, al final del día, SIEMPRE necesitará alimentar su navegador con datos binarios que se puedan interpretar como una imagen sin procesar (generalmente un conjunto de píxeles rgb (a) ).

Sí, solo hay "UNA" forma de mostrar una imagen en una computadora. Pero hay diferentes maneras en que podemos representar esa imagen.

Codificación

A bajo nivel, diferentes computadoras representan números de diferentes maneras, por lo que los estándares web decidieron representar imágenes en la llamada codificación RGB8 o RGBA8 (Rojo-Verde-Azul (-Alfa)-NumBits, 8 bits = 1 Byte). Esto significa que cada píxel está representado por una matriz de 4 bytes (números), cada uno de los cuales varía de 0 a 255. Esta matriz es lo único que su navegador ve como imagen.

Al final tu imagen es algo como esto:

 // using color(x, y) to describe the image pixels [ red(0, 0), green(0, 0), blue(0, 0), alpha(0, 0), red(1, 0), ... ] = [ 124, 12, 123, 255, 122, ... ]

Ahora que puede ver una imagen como una matriz lineal de píxeles, podemos decidir cómo escribirla en una hoja de papel (nuestro "código"). El navegador (usual e históricamente) analiza cada paquete enviado en la web en un archivo HTML como texto sin formato, por lo que debemos usar caracteres para describir nuestra imagen, el estándar es SOLO usar UTF-8 (codificación de caracteres, superconjunto de ASCII). Podemos escribirlo en JS como una matriz de números, por ejemplo.

Pero fíjate en el número 255. Cada vez que envías ese número en el newtork estás enviando 3 caracteres: '2', '5', '5'. La web se comunica solo con caracteres, así que... ¿Hay alguna manera de hacer una representación compacta de ese número para enviar la menor cantidad de bytes posible (¡salvando a aquellos que tienen una conexión lenta!)?

Base64 es la codificación más famosa utilizada para describir esa matriz lineal de la manera más compacta, porque comprime los 255 caracteres en solo 1 o 2 caracteres (dependiendo de la secuencia). En lugar de representar el número en base a 10, podemos deshacernos de algunos caracteres que solemos usar como letras para representar más dígitos. Entonces '11' become 'a', '12' => 'b', '13' => 'c', ..., '32' => 'a', ..., '63' => 'Z', '64' => '10', '65' => '11', ..., '128' => '20' , y así sucesivamente. Además, este algoritmo explota una representación de más bajo nivel para codificar más dígitos en un solo carácter (es por eso que a veces verá algunos '=' al final).

Eche un vistazo a diferentes representaciones de la misma imagen:

 // JavaScript Array [ /* pixel 1 */ 124, 12, 123, 255, /* pixel 2 */ 122, 12, 56, 255 ] // 67 characters // (30 without spaces and comments) // Base64 fAx7w796DDjDvw== // 16 characters // Base32 3sc3r7v3qc1o7vAb== // 18 characters (always >= Base64)

Es fácil ver por qué eligen base64 como algoritmo común (y este ejemplo cuenta solo por 2 píxeles).

(Ejemplo de imagen Base32)

Formatos

Ahora imagine enviar una imagen 4K en la web, que tiene una dimensión de 3'656 × 2'664. Esto significa que estás enviando por Internet 9'739'584 de píxeles, con 4 bytes cada uno, para un total de 38'958'336 bytes (~39 MB). Además, imagina qué desperdicio si la imagen es completamente negra (podemos describir la imagen completa solo con un píxel)... Eso es demasiado (especialmente para conexiones bajas), por esta razón inventaron algunos algoritmos que pueden describir la imagen en un forma más compacta, los llamamos formato de imagen . PNG y JPEG/JPG son ejemplos de formatos que comprimen la imagen (imagen jpg 4k ~8 MB, imagen png 4k puede variar de ~2 MB a ~22 MB dependiendo de ciertos parámetros y de la imagen en sí).

Alguien lleva la compresión a un nivel superior, estabilizando el formato estándar de compresión gzip (un algoritmo de compresión genérico sobre una imagen ya comprimida, o cualquier otro tipo de archivo).

Dibujar en el navegador

Al final de este viaje, solo tiene dos formas diferentes en que los navegadores le permiten dibujar contenido: URI y ArrayBuffer .

• URI : puede usarlo con <img> y css, configurando la propiedad src del elemento o configurando cualquier propiedad de estilo que pueda obtener una URL de imagen como entrada.
• ArrayBuffer : manipulando el búfer <canvas>.context (que es solo la matriz lineal que discutimos anteriormente)

Obviamente, los navegadores también permiten convertir o cambiar entre las dos formas.

URI

URI es la forma en que definimos cierto contenido, que puede ser un recurso almacenado ( URL : todos los protocolos excepto data , por ejemplo, http(s):// , ws(s):// o file:// ) o un búfer descrito por una cadena (el protocolo data ).

Cuando solicita una imagen, al configurar la propiedad src , su navegador analiza la URL y, si es un contenido remoto, realiza una solicitud para recuperarlo y analizar el contenido de la manera adecuada (formato y codificación). De la misma manera, cuando realiza una llamada de fetch , le está pidiendo al navegador que solicite el contenido remoto; la función fetch tiene la posibilidad de obtener la respuesta de diferentes maneras:

• textual, solo un montón de caracteres (generalmente se usa para analizar JSON/DOM/XML)
• datos binarios, divididos en:
  • ArrayBuffer , que es una representación de la matriz lineal de la imagen, discutimos anteriormente
  • Blob , que es una representación abstracta de un objeto genérico similar a un archivo (que también encapsula un ArrayBuffer interno). El Blob es algo así como un puntero a una entidad similar a un archivo en el caché del navegador, por lo que no necesita descargar/solicitar el mismo archivo varias veces.

 // ArrayBuffer from fetch: fetch(myRequest).then(function(response) { return response.arrayBuffer(); }) // Blob from fetch fetch(myRequest).then(function(response) { return response.blob(); }) // ArrayBuffer from Blob blob.arrayBuffer();

Entonces, ahora debe decirle al navegador cómo dar sentido al contenido que obtiene de la respuesta. Necesita convertir los datos a una URL analizable:

 var encodedURI = `data:${format};${encoding},` + encodeBuffer(new Uint8Array(arrayBuffer)); image.src = encodedURI // for base64 encoding var encodeBuffer = function(buffer) { return window.btoa(String.fromCharCode.apply(null, buffer)); } // for blobs image.src = (window.URL || window.webkitURL).createObjectURL(blob);

Tenga en cuenta que los navegadores admiten otras codificaciones además de base64, también está disponible base32 pero, como vimos anteriormente, no es tan conveniente de usar. Además, no hay una función integrada como btoa para codificar un búfer en base32.

Tenga en cuenta también que el valor de formato puede ser cualquier tipo de tipo MIME , como image/png|jpg|gif|svg o text/plain|html|xml , application/octet , etc. Obviamente, solo los tipos de imagen se muestran como imágenes.

Cuando el recurso no se solicita desde un servidor remoto (con un file:// o un protocolo data ), la imagen generalmente se carga sincrónicamente, por lo que tan pronto como configure la URL, el navegador leerá, decodificará y colocará el búfer para mostrar en su imagen. Esto tiene dos consecuencias:

1. Los datos se gestionan localmente (sin requisitos de conexión a Internet)
2. Los datos se tratan de forma síncrona, por lo que si la imagen es grande tu ordenador se atascará en el procesamiento hasta el final (mira por qué es una mala práctica usar el protocolo de data para vídeos o grandes datos en la sección especial, al final)

URL frente a URI

URI es un identificador genérico para un recurso, URL es un identificador para una ubicación donde recuperar el recurso. Por lo general, en un contexto de navegador son casi un concepto superpuesto, encontré que esta imagen explica mejor que mil palabras:

Los data son prácticamente una URI , cada solicitud con un protocolo es en realidad una URL

Nota al margen

En su pregunta, escribe esto como un método alternativo al "establecer la URL del elemento de imagen":

 fetch(imageUrl) .then((response)=>response.blob()) .then((blob)=>{ const objectUrl = URL.createObjectURL(blob) document.querySelector("#myImage").src = objectUrl; // <-- setting url! })

Pero cuidado: ¡en realidad estás configurando una URL de origen de elemento de imagen!

Lienzo

El elemento <canvas> le brinda el control total sobre un búfer de imagen, también para procesarlo más. Literalmente puedes dibujar tu matriz en ella:

 var canvas = document.getElementById('mycanvas'); // or offline canvas: var canvas = document.createElement('canvas'); canvas.width = myWidth; canvas.height = myHeight; var context = canvas.getContext('2d'); // exemple from array buffer var arrayBuffer = /* from fetch or Blob.arrayBuffer() or also with new ArrayBuffer(size) */ var buffer = new Uint8ClampedArray(arrayBuffer); var imageData = new ImageData(buffer, width, height); context.putImageData(iData, 0, 0); // example image from array (2 pixels) var data = [ // RGBA 255, 255, 255, 255, // white pixel 255, 0, 0, 255 // red pixel ]; var buffer = new Uint8ClampedArray(data); var imageData = new ImageData(buffer, 2, 1); context.putImageData(iData, 0, 0);

(Tenga en cuenta que ImageData quiere una matriz RGBA)

Para recuperar ArrayBuffer (que también puede volver a conectar en image.src después), puede hacer lo siguiente:

 var imageData = context.getImageData(0, 0, canvas.width, canvas.heigth); var buffer = imageData.data; // Uint8ClampedArray var arrayBuffer = buffer.buffer; // ArrayBuffer

Este es un ejemplo de cómo procesar una imagen:

 // reading image var image = document.getElementById('myimage'); image.onload = function() { // load image in canvas context.drawImage(image, 0, 0); // process your image context.fillRect(20, 20, 150, 100); var imageData = context.getImageData(0, 0, canvas.width, canvas.height); imageData.data[0] = 255; // converting back to base64 url var resultUrl = window.btoa(String.fromCharCode.apply(null, imageData.data.buffer)); // setting image url and disabling onload image.onload = null; image.src = resultUrl; }; // note src setted after onload image.src = 'ANY-URL';

Para esta parte te sugiero que le eches un vistazo al Tutorial de Canvas - MDN

ESPECIAL

El audio y el video se tratan de la misma manera, pero debe codificar y formatear también la dimensión del tiempo y el sonido de alguna manera. Puede cargar un audio/video desde una cadena base64 ( no es tan buena idea para videos) o mostrar un video en un lienzo