Volver al indice
Hace pocos dias tuve la necesidad de crear una previsualización de un panorama google streetview usando un input file, esto fue para el proyecto de Tours virtuales . Por que muchos usuarios estaban subiendo imagenes incorrectas y hasta que eran procesadas podian ver los resultados finales. Esta era tediso asi que , he creado una funcionalidad de previsualización.
En el siguiente link puedes ver el resultado:
https://jsfiddle.net/SaulBurgos/rg5o213b/3/
Los pasos son los siguientes:
- En el input file definimos un metodo que sera llamado "createPreview" cuando el input cambie
- "createPreview" usan la API FileReader para leer el archivo
- Creamos la instancia de FileReader y definimos 2 metodos para escuchar los eventos: "onload" y "onprogress"
- onload se dispara cuando FileReader lee completamente el archivo, pero la imagen aun no ha sido cargada
- Para cargar la imagen creamos una imagen con la Image API, al igual que con FileReader podemos definier un metodo para correrlo cuando la imagen ha sido cargada con "onload"
- Despues solo usamos canvas para crear un objecto donde poner esta imagen. Esta parte es la mas importante por que aqui se redimensiona la imagen a 1024x512. De esta manera evitamos que el navegador se congele, por si el usuario ingresa resolusiones muy grandes.
- El metedo encargado de la redimension es "drawImage" , despues con el metodo "toDataURL" obtenemos la nueva imagen redimensionada y la pasamos a Google streetview
No hay comentarios:
Publicar un comentario