evento paste Fuerza de codificar imágenes en base 64

Question

Antecedentes:

Estoy desarrollando una aplicación web HTML5 para mi empresa que es básicamente un editor de texto enriquecido (similar a Google Docs) que almacena información en una base de datos.

Estamos utilizando CKEditor 3 como editor de texto enriquecido y Jquery para lograr esto.

Elegimos Chrome de Google como el navegador preferido.

Nuestra aplicación se encuentra actualmente en período de prueba alfa, con un grupo de 18 probadores (que son los mismos que utilizarán la aplicación). Estas personas son heterogéneas, pero casi todas ellas tienen habilidades informáticas básicas, en su mayoría limitadas a MS Word y MS Excel.

.

Problema:

La mayoría de nuestros usuarios siguen utilizando la palabra para elaborar el documento, debido principalmente a su capacidad de generar diagramas de flujo ricos. Cuando copian/pegan el contenido generado en Chrome, las imágenes se pegan como enlaces a un archivo local (generado automáticamente por el sistema operativo, en una carpeta de usuarios/*/temp). Esto significa que el servidor no puede acceder a estos archivos y los documentos resultantes (PDF generados) no contienen las imágenes.

.

Pregunta

¿Cómo puedo forzar las imágenes pegadas a ser codificados en base 64, de forma similar a lo que ocurre en Firefox?

.

Notas

Si es posible "cargar" con el servidor una imagen referenciada como src = "file: // C: \ algo", que resolvería mi problema, ya que puede codificar base 64 que la imagen tarde .

No podemos cambiar a firefox ya que no resuelve completamente nuestro problema (si una imagen se "pega" junto con el texto, firefox no base64 la codifica) y plantea otros problemas como una barra de desplazamiento horizontal que aparece cuando el texto es demasiado largo para caber en el área de texto.

Answer 1

Sí y no, creo.

Es posible interceptar el evento de pegado y recuperar la imagen pegada como un archivo, luego usar FileReader para leer el archivo como un URI de datos (PNG codificado en base 64).

Sin embargo, Word parece enviar una referencia a un archivo local, que genera una excepción de seguridad (al menos en Chrome) debido a una solicitud entre dominios (http://... y file:///...). En lo que a mí respecta, no hay forma de obtener el contenido real de dichos archivos locales, y los contenidos son y no enviados como datos del propio portapapeles.

Si copia una imagen "pura" (por ejemplo, sin pintura), puede obtener los datos codificados de la base 64 de la siguiente manera: http://jsfiddle.net/pimvdb/zTAuR/. O añada la imagen como PNG codificado en base 64 en el 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); 
};