Come funziona l’immagine incollata dalle funzionalità degli Appunti in Gmail e Google Chrome 12+?

Ho notato un post di blog di Google che menziona la possibilità di incollare immagini direttamente dagli Appunti in un messaggio di Gmail se utilizzi l’ultima versione di Chrome. Ho provato questo con la mia versione di Chrome (12.0.742.91 beta-m) e funziona alla grande usando i tasti di controllo o il menu di scelta rapida.

Da questo comportamento devo presupporre che l’ultima versione del webkit utilizzato in Chrome sia in grado di gestire le immagini nell’evento Javascript paste, ma non sono stato in grado di individuare alcun riferimento a tale miglioramento. Credo che ZeroClipboard si leghi agli eventi di keypress per triggersre la sua funzionalità flash e in quanto tale non funzionerebbe attraverso il menu di scelta rapida (inoltre, ZeroClipboard è cross-browser e il post dice che funziona solo con Chrome).

Quindi, come funziona e dove è stato apportato il miglioramento a Webkit (o Chrome) che abilita la funzionalità?

Ho passato un po ‘di tempo a sperimentare con questo. Sembra di seguire la nuova specifica API Clipboard . È ansible definire un gestore di eventi “paste” e guardare event.clipboardData.items e chiamare getAsFile () su di essi per ottenere un Blob. Una volta che hai un Blob, puoi usare FileReader per vedere cosa c’è dentro. Ecco come puoi ottenere un URL di dati per le cose che hai appena incollato in Chrome:

// window.addEventListener('paste', ... or document.onpaste = function(event){ var items = (event.clipboardData || event.originalEvent.clipboardData).items; console.log(JSON.stringify(items)); // will give you the mime types for (index in items) { var item = items[index]; if (item.kind === 'file') { var blob = item.getAsFile(); var reader = new FileReader(); reader.onload = function(event){ console.log(event.target.result)}; // data url! reader.readAsDataURL(blob); } } } 

Una volta che hai un url di dati puoi visualizzare l’immagine sulla pagina. Se invece vuoi caricarlo, puoi usare readAsBinaryString, oppure puoi inserirlo in un XHR usando FormData .

La risposta di Nick sembra aver bisogno di piccole modifiche per funzionare ancora 🙂

 // window.addEventListener('paste', ... or document.onpaste = function (event) { // use event.originalEvent.clipboard for newer chrome versions var items = (event.clipboardData || event.originalEvent.clipboardData).items; console.log(JSON.stringify(items)); // will give you the mime types // find pasted image among pasted items var blob = null; for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf("image") === 0) { blob = items[i].getAsFile(); } } // load image if there is a pasted image if (blob !== null) { var reader = new FileReader(); reader.onload = function(event) { console.log(event.target.result); // data url! }; reader.readAsDataURL(blob); } } 

Esempio di codice di esecuzione: http://jsfiddle.net/bt7BU/225/

Quindi le modifiche alla risposta ai nick sono state:

 var items = event.clipboardData.items; 

a

 var items = (event.clipboardData || event.originalEvent.clipboardData).items; 

Inoltre ho dovuto prendere il secondo elemento dagli elementi incollati (il primo sembra essere text / html se copi un'immagine da un'altra pagina web nel buffer). Quindi ho cambiato

  var blob = items[0].getAsFile(); 

a un loop per trovare l'object contenente l'immagine (vedi sopra)

Non sapevo come rispondere direttamente alla risposta di Nick, spero che vada bene qui: $ 🙂

Ecco un buon plugin jQuery che racchiude l’intero accordo (fondamentalmente gli stessi principi della risposta di Nick ): http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

Ha una demo live, un codice sorgente annotato e tutto il resto.

I browser Web continuano a marciare. Ho recentemente trovato questo:

Snippet di codice – Accesso alle immagini degli appunti con Javascript

e questo:

The Paste Wascanvasnd (o, perché l’evento onPaste è un casino)

Il primo collegamento descrive un modo per ottenere le immagini degli appunti utilizzando JavaScript solo su Firefox e Chrome. Il secondo link contiene un postscript che menziona la stessa tecnica adattata a IE (versione sconosciuta).

Per quanto ne so –

Con le funzionalità di HTML 5 (File Api e relativo) – l’accesso ai dati di immagine degli appunti è ora ansible con un semplice javascript.

Questo tuttavia non funziona su IE (niente meno di IE 10). Non so molto anche sul supporto di IE10.

Per IE le opzioni che credo siano le opzioni di “fallback” sono l’uso di Adobe AIR API o l’utilizzo di un’applet firmata

Wow, è fantastico. Non mi sono immerso nella fonte di Gmail per capirlo ancora (l’ho fatto con la funzionalità di trascinamento), ma suppongo che sia un’estensione dell’API di trascinamento / rilascio che Chrome ha già esteso. C’è una discreta recensione su come funziona la funzionalità drag-to-desktop: http://www.thecssninja.com/javascript/gmail-dragout che potrebbe almeno indirizzarti nella giusta direzione.