Tengo una página X3D con algunas primitivas sólidas. Quiero que el usuario pueda seleccionar su propia imagen para usarla como textura, pero quiero que la página esté del lado del cliente.
¿Puede JavaScript insertar una imagen en HTML sin cargar la imagen en un servidor? Tengo un vago recuerdo de haber visto esta opción en alguna parte. La imagen se cambió a un PNM y se insertó como texto y luego se volvió a convertir en una imagen para su visualización/procesamiento. No puedo encontrar una referencia en ninguna parte y es posible que esté usando los términos de búsqueda incorrectos. Hay páginas web (creo) que solicitan que se seleccione una imagen para mostrarla sin cargarla nunca. ¿Cómo se llama esta función/script? ¿Se ha desarrollado alguna otra función js que haga esto de manera más eficiente? ¿Me he vuelto loco?
JavaScript hace esto todo el tiempo con el texto. llene un formulario y vea el texto allí mismo.
Mi ejemplo X3D está debajo.
enter code here enter code here enter code here
enter code here <shape> <appearance> <material diffuseColor='0.5 0.2 1.0'> </material> <ImageTexture url=' "THE_CLIENT_IMAGE.png" '></ImageTexture> </appearance> <sphere radius="3" > </sphere> </shape> </Transform>Fragmento de trabajo:
const img = document.querySelector('#img') document.querySelector('#file').addEventListener('input', event => { if (event.target.files.length === 0) { console.error('No file provided') return } const reader = new FileReader() reader.addEventListener('loadend', () => { img.src = reader.result }) reader.readAsDataURL(event.target.files[0]) }) <input type="file" id="file"> <img id="img"> Cambia <img> a ImageTexture y listo