Carica l'immagine locale nel browser utilizzando JavaScript?

Question

Attualmente sto sviluppando una soluzione per un'applicazione di stampa di poster web-to-print.

Una delle funzionalità che vorrei includere è la possibilità di "modificare" (ritagliare/ridimensionare/ruotare) una determinata immagine, prima di procedere all'ordinazione di un poster di detta immagine.

Per evitare la necessità degli utenti di caricare l'immagine su un server remoto prima di editing, mi piacerebbe sapere quanto segue:

E 'possibile (tramite JavaScript) per caricare un'immagine memorizzata sul client macchina nella memoria del browser/browser per la modifica, senza caricare l'immagine su un server remoto? E se sì, come è fatto?

Grazie,

BK

Answer 1

utilizzando HTML/Javascript è possibile selezionare solo i file utilizzando il componente di upload di file html (credo Flash involucro/Silverlight questo per rendere le cose più facili, ma la sua ancora in modalità sandbox)

È tuttavia possibile utilizzare Java Applet (o qualsiasi cosa vengano chiamati in questi giorni), controlli Native ActiveX o .Net Controls per fornire funzionalità aggiuntive (implicazioni di sicurezza dell'hash e framework VM/Runtime necessari ecc.)

Adobe Air o altra tecnologia lato client potrebbe funzionare, ma sembra che tu voglia farlo in JavaScript. In questo caso, caricare il file sul server e manipolarlo da lì è la scelta migliore.

* [EDIT] Dal 2010, da quando la questione è stata risolta, la tecnologia è andata avanti, html ha ora la capacità di creare e manipolare all'interno del browser. vedere le risposte più recenti o questi esempi: http://davidwalsh.name/resize-image-canvas http://deepliquid.com/content/Jcrop.html *

Answer 2

Sto solo cercando di farlo, ma con Chrome ho ricevere questo messaggio:

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

quando faccio questo:

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

Answer 3

l'immagine può essere modificato senza che l'utente necessario per caricare l'immagine sul server.

Date un'occhiata al link qui sotto. Può essere fatto abbastanza facilmente.

Reading local files using Javascript

Answer 4

Sì, è possibile! Ma per farlo il browser deve supportare l'archiviazione locale! È HTML5 api quindi i browser più moderni saranno in grado di farlo! Ricordare che la memorizzazione locale può salvare solo i dati di stringa in modo che sia necessario modificare le immagini in una stringa blob. La vostra fonte immagine sarà simile a questa

Questo è un breve frammento che vi aiuterà!

   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 } 

Spero che questo breve snippet sia utile.Ricordate LocalStorage salva solo i dati di stringa quindi potete

Oh, e dal modo in cui, se si utilizza un jcrop per ritagliare le immagini è necessario salvare il codice blob dall'immagine alla forma e inviarlo al server manualmente perché jcrop solo gestisce le immagini come un file non come una stringa base64.

Buona fortuna! : D