Almacenar imágenes en el objeto Javascript

No estoy seguro de si esto es posible, pero quiero almacenar una imagen en una variable de JavaScript o un objeto y cuando la página se cargue, quiero hacer que esas imágenes aparezcan donde lo desee.Almacenar imágenes en el objeto Javascript

Quiero saber si algunas imágenes se convierten a formato binario. ¿Se pueden convertir a imágenes con JavaScript?

Fuente

2010-03-07 user288134

i no creo que es posible, aunque el método de Luca se puede utilizar para crear el objeto, pero ese objeto únicamente incluya la ubicación de la imagen no la imagen en si misma –

contendrá una referencia a la imagen en sí. –

Parece que el OP está solicitando cómo hacer islas de datos en JavaScript, específicamente para imágenes. Ninguna de las respuestas dadas anteriormente proporciona dicho método, así que aquí tienes.

Básicamente, codifica la imagen como una cadena base64 y luego la configura como la fuente de un elemento DOM. Establecer el origen de un objeto Image en una url no es equivalente, ya que requiere una conexión HTTP adicional.

var data = 'data:image/gif;base64,'+ 
    'R0lGODlhAAEwAMQAAJ2M5Me98GRK1DoYyYBr3PHv++Pe99XO81Y50auc6PBkZEgpzbmt7HJa2I57'+ 
      // snip // 
    'fS3CqU7XGYgE+GqHvrLJ8Tr6qXmqiwAF9CffgnMNqmWHAWNBwwGsKpKsrmJqltOOV69nuYxSkqpo'+ 
    'Tata18rWtrr1rTIIAQA7'; 
var icon_elem = document.getElementById("icon_here"); 
icon_elem.src = data;

El código anterior y un ejemplo completo se puede encontrar aquí: http://www.kawa.net/works/js/data-scheme/base64-e.html

Fuente

2010-03-07 09:53:16

Muchas gracias ... esto era lo que realmente necesitaba ... – user288134

Usted puede simplemente utilizar

var img = new Image(); 
img.src = "http://yourimage.jpg";

para crear una imagen de DOM.

Una imagen DOM es un objeto en la memoria que contiene la forma binaria de la imagen, por lo que no es necesario volver a convertirla en una imagen porque ya es una.

Fuente

2010-03-07 09:31:59

Gracias por responder, pero mis necesidades me limitan a referirme a la imagen con una ruta absoluta/relativa. Piénselo de una manera en la que quiero almacenar la imagen de alguna manera ?? en la página HTML en sí. No estoy seguro si es posible. – user288134

La única forma de hacer referencia a una imagen es a través de una ruta. ¿De qué otra forma obtendrías la imagen? –

Cuz en su escenario y asumiendo que el navegador no almacena en caché, cada vez que asigna la URL a src y luego lo coloca en DOM, ¿no requeriría eso una recarga implícita? – MJoraid

Mira, esta es una cuestión simple. Pero el método para abordar este problema no es la forma en que lo está intentando en este momento.

Lo que piensas que va a funcionar:
Almacenaremos la imagen (sus datos binarios) en una variable js, y luego la golpearemos en la página en cualquier momento.

Cómo funcionará mucho más fácilmente:
solo tiene que crear una imagen DOM en la página y establecer su origen. El navegador buscará la imagen del servidor automáticamente.

Ejemplos:

ex-1:

var img_src = "http://someserver/yourimage.png"; 
var node = document.getElementById('the-node-in-which-i-want-my-image'); 
node.innerHTML = "<img src='"+img_src+"' alt='my image'>";

ex-2: (usando jquery) - este es esencialmente el mismo que el anterior, sólo que mucho más fácil de escribir:

var img_src = "http://someserver/yourimage.png"; 
$('#the-node-in-which-i-want-my-image') 
    .html("<img src='"+img_src+"' alt='my image'>");

Ahora, hay una cosa más: el navegador comienza a buscar la imagen después de este código se ejecuta, por lo que la imagen aparece un poco después de insertarla en la D OM.

Para evitar esto, se puede precargar las imágenes usando:

var prefetch = new Image(); 
prefetch.src = "http://someserver/yourimage.png";

Salud!

Fuente

2010-03-07 09:40:04 jrharshath

Almacenar imágenes en el objeto Javascript

Respuesta

Cuestiones relacionadas