¿Cargar imagen local en el navegador usando JavaScript?

Question

Actualmente estoy desarrollando una solución para una aplicación de impresión de póster que se imprime desde la web.

Una de las características que me gustaría incluir es la capacidad de 'editar' (recortar/escalar/rotar) una imagen dada, antes de proceder a pedir un póster de dicha imagen.

Para evitar el requisito de que el usuario la posibilidad de subir la imagen a un servidor remoto antes de la edición, me gustaría saber lo siguiente:

¿Es posible (usando JavaScript) para cargar una imagen almacenada en el cliente máquina en la memoria del navegador/navegador para editar, sin cargar la imagen a un servidor remoto? Y si es así, ¿cómo se hace esto?

Gracias,

BK

Answer 1

el uso de HTML/Javascript que sólo se puede seleccionar archivos utilizando el componente de carga de archivos html (creo flash envoltura/Silverlight esto para hacer las cosas más fáciles, pero aún es un recinto de seguridad)

Sin embargo, puede utilizar Applets Java (o como se denominen estos días), controles Native ActiveX o .Net Controls para proporcionar funcionalidad adicional (esto implica implicaciones de seguridad y VM/Runtimes Frameworks necesarios, etc.)

Adobe Air u otra tecnología del lado del cliente podría funcionar, pero parece que quiere hacer esto en JavaScript. En este caso, subir la carpeta al servidor y manipular desde allí es la mejor opción.

* [EDITAR] Desde 2010, desde que se respondió a esta pregunta, la tecnología se ha movido, html ahora tiene la capacidad de crear y manipular dentro del navegador. ver las respuestas más nuevos o estos ejemplos: http://davidwalsh.name/resize-image-canvas http://deepliquid.com/content/Jcrop.html *

Answer 2

Sólo estoy tratando de hacerlo, pero con cromo que recibir este mensaje:

Not allowed to load local resource: file:///C:/fakepath/1.jpg 

cuando hago esto:

$img = new Image(); 
$img.src = $('#f').val(); 
$img.onLoad = function(){ 
    alert('ok'); 
} 

Answer 3

La imagen se puede editar sin que el usuario necesite subir la imagen al servidor.

Eche un vistazo al siguiente enlace. Se puede hacer con bastante facilidad.

Reading local files using Javascript

Answer 4

Sí se puede! ¡Pero para hacerlo, el navegador debe ser compatible con el almacenamiento local! ¡Es api HTML5 así que la mayoría de los navegadores modernos podrán hacerlo! Recuerde que localstorage puede guardar solo datos de cadena, por lo que debe cambiar las imágenes a una cadena de blob. Su fuente de imagen se verá algo como esto

Este es un fragmento corto que le ayudará!

   if(typeof(Storage)!=="undefined"){ 

       // here you can use the localstorage 
       // is statement checks if the image is in localstorage as a blob string 
       if(localStorage.getItem("wall_blue") !== null){ 

       var globalHolder = document.getElementById('globalHolder'); 
       var wall = localStorage.getItem('wall_blue'); 
       globalHolder.style.backgroundImage= "url("+wall+")"; 


       }else{ 

       // if the image is not saved as blob in local storage 
       // save it for the future by the use of canvas api and toDataUrl method 
       var img = new Image(); 
       img.src = 'images/walls/wall_blue.png'; 
       img.onload = function() { 

       var canvas = document.createElement("canvas"); 
       canvas.width =this.width; 
       canvas.height =this.height; 

       var ctx = canvas.getContext("2d"); 
       ctx.drawImage(this, 0, 0); 
       var dataURL = canvas.toDataURL(); 
       localStorage.setItem('wall_blue', dataURL); 

       }; 

      }}else{//here you upload the image without local storage } 

Espero que este breve fragmento le sea útil.Recuerde Localstorage guarda solo datos de cadena para que no pueda

Ah, y por cierto si está utilizando un jcrop para recortar las imágenes, debe guardar el código de blob de la imagen en el formulario y enviarlo al servidor manualmente porque solo jcrop maneja las imágenes como un archivo, no como una cadena base64.

¡Buena suerte! : D