Forza evento pasta per codificare le immagini in base64

Question

Background:

Sto sviluppando una webapp HTML5 per la mia azienda che è fondamentalmente un Rich Text Editor (simile a Google Docs) che memorizza le informazioni in un database.

Stiamo utilizzando CKEditor 3 come editor di testo e Jquery per ottenere questo risultato.

Abbiamo scelto Google Chrome come browser preferito.

La nostra app è attualmente in fase di test alfa, con un gruppo di 18 tester (che sono gli stessi che useranno l'app). Queste persone sono eterogenee, ma quasi tutte hanno competenze informatiche di base, per lo più limitate a MS Word e MS Excel.

.

Problema:

maggior parte dei nostri utenti usano ancora la parola per elaborare il documento, soprattutto per la sua capacità di generare diagrammi di flusso ricchi. Quando copia/incolla il contenuto generato su Chrome, le immagini vengono incollate come collegamento a un file locale (generato automaticamente dal sistema operativo, in una cartella utenti/*/temp). Ciò significa che il server non può accedere a questi file e che i documenti risultanti (PDF generati) non contengono le immagini.

.

Domanda

Come posso forzare le immagini incollate essere codificati in Base64, simile a quello che succede in Firefox?

.

Note

Se è possibile "caricare" per server di un'immagine di riferimento come src = "file: // c: \ qualcosa", che avrebbe risolto il mio problema che posso Base64 codificare l'immagine successiva .

Non possiamo passare a Firefox perché non risolve completamente il nostro problema (se un'immagine viene "incollata" insieme al testo, Firefox non la codifica in base64) e solleva altri problemi come una barra di scorrimento orizzontale che appare quando il testo è troppo lungo per adattarsi alla textarea.

Answer 1

Sì e no, credo.

E 'possibile intercettare l'evento pasta a prendere l'immagine incollata come un file, quindi utilizzare FileReader per leggere il file come un URI dati (base 64 codificato PNG).

Tuttavia, Word sembra inviare un riferimento a un file locale, che genera un'eccezione di sicurezza (almeno su Chrome) a causa di una richiesta interdominio (http://... e file:///...). Per quanto mi riguarda, non c'è modo di ottenere il contenuto effettivo di tali file locali, ei contenuti sono non inviati come dati degli appunti stessi.

Se si copia un'immagine "pura" (ad esempio su Paint), è possibile ottenere i dati codificati di base 64 come segue: http://jsfiddle.net/pimvdb/zTAuR/. Oppure aggiungi l'immagine come PNG codificato di base 64 nel div: http://jsfiddle.net/pimvdb/zTAuR/2/.

div.onpaste = function(e) { 
    var data = e.clipboardData.items[0].getAsFile(); 

    var fr = new FileReader; 

    fr.onloadend = function() { 
     alert(fr.result.substring(0, 100)); // fr.result is all data 
    }; 

    fr.readAsDataURL(data); 
};