2011-12-21 15 views
13

¿es posible cargar una imagen a través de la API de archivo HTML 5 y convertirla en una imagen de fondo css utilizando javascript/jquery? Si es posible, ¿cómo se hace?HTML 5 Imagen de carga de archivo como imagen de fondo

+8

convertir Tal vez los datos cargados a una URI de datos. Eso se puede usar como URL de la imagen de fondo. Vea ejemplos aquí: http://sveinbjorn.org/dataurls_css – dronus

+0

¡Eso realmente ayudó! Muchas gracias. Voy a publicar cómo lo hice lo antes posible, pero gracias a las restricciones de reputación no puedo hacerlo durante las próximas 5 horas –

Respuesta

6

dronus me dio una gran respuesta a esta pregunta mediante la publicación de este enlace en la sección de comentarios: sveinbjorn.org/dataurls_css

Usted sencilla tiene que hacer lo siguiente para utilizar los datos de imagen de una imagen de fondo CSS para: Esto ahorrará los datos src de la imagen después de crear una nueva y llenar y llenarlo con los datos utilizando el FileReader()

var imgFileData = $('#image').attr('src') 

Ahora sólo tiene que tomar esta var y configurarlo como la url imagen de fondo

$('#yourDiv).css({'background-image':'url(' + imgFileData + ')'}); 
$('#image').hide(); //optional 

Leer el enlace para obtener una mejor comprensión de lo que está pasando aquí, y gracias de nuevo a dronus