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