jueves, marzo 08, 2012

Cargar imagen de portapapeles (clipboard) javascript

Saludos.

Sin duda en algun momento es necesario cargar una imagen en una aplicacion web capturando con el boton print screen, que guarda la imagen en el portapapeles. pues bien despues de tanta busqueda y preguntar en algunos lados consegui lo siguiente.

html xmlns="http://www.w3.org/1999/xhtml"
head runat="server"
    title/title
    script type="text/javascript" src="js/jquery-1.7.1.min.js" /
    script type="text/javascript" src="js/jslint.min.js" /
    script type="text/javascript" src="js/clientcide.2.2.0.js" /
script type="text/javascript"
        $(function () {
            $("#editor-box").bind("paste", function (ev) {
                var $this = $(this);
                var original = ev.originalEvent;
                var file = original.clipboardData.items[0].getAsFile();
                var reader = new FileReader();
                reader.onload = function (evt) {
                    var result = evt.target.result;
                    var result = evt.target.result;
                    var arr = result.split(",");
                    var data = arr[1]; // raw base64
                    var contentType = arr[0].split(";")[0].split(":")[1];

                    // this needs to post to a server route that can accept raw base64 content and save to a file          
                    $.post("/echo/html/", {
                        contentType: contentType,
                        data: data
                    });
                    $this.append("");
                };

                reader.readAsDataURL(file);
            });
        });
    /script
/head
body
 form id="form1" runat="server"
    div id="editor-box" contenteditable="true" style="border: 1px solid black; min-height: 100px; min-width: 100px;"
    /div
    /form
/body
/html

   

   

Bueno espero que sea de ayuda.
Falta pasar la imagen al servidor pero antes de eso se debera tomar en cuenta lo siguiente.
http://es.wikipedia.org/wiki/Data:_URL

Bueno mi agradecimento al blog
http://www.foliotek.com/devblog/copy-images-from-clipboard-in-javascript/#comment-1751
http://jsfiddle.net/FhUwn/1/


Hasta la proxima.

http://www.corvustec.com/





No hay comentarios: