.png)
Pegar imagenes del portapapeles en nuestra aplicacion web #Genexus
He preparado un ejemplo lo mas sencillo que he podido, para ilustrar como podemos hacer esto en Genexus.
Utilizando un codigo javascript el cual encontre en la siguiente paginahttp://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/ , al cual le hice algunos cambios para lograr integrarlo con un webpanel. los cuales describo a continuación:
Archivo JavaScript
En un archivo al que llamaremos portapapeles2.js, copiamos el siguiente codigo:
//Espera a que la pagina termine de cargar para ejecutar la funcion iniciaListener
window.addEventListener(“load”, iniciaListener);function iniciaListener() {
// Se agrega el listener del evento paste
window.addEventListener(“paste”, pasteHandler);
}
/* Manejo de los eventos paste */
function pasteHandler(e) {
// Necesitamos comprobar si event.clipboardData.items es soportado
//(Chrome)
if (e.clipboardData.items) {
// Obtenemos los items del portapapeles
var items = e.clipboardData.items;if (items) {
// Recorremos todos los items, en busca de un tipo de imagen
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf(“image”) !== -1) {
// Necesitamos representar la imagen como un
//archivo
var blob = items[i].getAsFile();
var URLObj = window.URL || window.webkitURL;
var source = URLObj.createObjectURL(blob);//utilizamos la siguiente linea para asignarle el source de la imagen que acabos de pegar a nuestra variable &Imagen, la cual se representa con una v (minuscula) al inicio y el nombre de la variable en mayusculasdocument.forms[“MAINFORM”].elements[“vIMAGEN”].src = source;
}
}
}
}
}
Implementaciòn en Genexus
Ahora en Genexus creamos un WebPanel, en el que solo tendremos una variable llamada &imagen de tipo image
En los eventos, definimos el evento Start, y cargamos nuestro archivo javascript.
En Ejecución
Presionamos F5 para que genexus nos genere la aplicaciòn, una vez que finaliza tenemos que crear una carpeta llamada js en la carpeta web de nuestro modelo y dentro de js copiar el archivo portapapeles2.js. una vez hecho esto abrimos nuestro web panel
Ahora solo presionamos la tecla “print screen” para copiar la imagen de la pantalla en el portapapeles, y presionamos ctrl + v.
Ya con la imagen en nuestra variable podemos utilizarla segun sean nuestras necesidades.
NOTA: Quiero aclarar que por motivos de simplificaciòn del codigo, este ejemplo solo es funcional con el navegador Chrome.
espero les sirva de ayuda y lo compartan, saludos.
Hola Amigo, Buenos Días, espero me puedas ayudar.
ResponderBorrarEstoy tratando de usar tú rutina en Genexus 10, que me podría ser útil, y me dispara el siguiente error:
Uncaught TypeError: Cannot set property 'src' of undefined
at pasteHandler (portapapeles2.js?202042122233989:24)
pasteHandler @ portapapeles2.js?202042122233989:24
¿Cómo lo podría solucionar?.
Gracias por tu atención
Oscar Lofrano desde Venezuela en Cuarentena.
Hola OJLM te comento que solucione tu mismo error cambiando la linea a:
ResponderBorrardocument.getElementById("vIMAGEN").src = source;
Pero ahora no puedo guardar la imagen. Vos pudiste avanzar ?