I'm trying to create a button for bug reports: and I need to improve the code script to execute the following functions:
Javascript code (Jquery):
$(function() {
$(document).on("click",'[id^="button-test"]', function (event, xhr, settings) {
console.log('event trigger');
var e = jQuery.Event("keydown");
e.which = 44; // # PrintScreen code value
e.altKey = true; // Alt key pressed
$("input").trigger(e);
retrieveImageFromClipboardAsBlob(e, function(imageBlob){
if(imageBlob){
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(img, 0, 0);
};
var URLObj = window.URL || window.webkitURL;
img.src = URLObj.createObjectURL(imageBlob);
}
});
});
});
function retrieveImageFromClipboardAsBlob(pasteEvent, callback){
if(pasteEvent.clipboardData == false){
if(typeof(callback) == "function"){
callback(undefined);
}
};
var items = pasteEvent.clipboardData.items;
if(items == undefined){
if(typeof(callback) == "function"){
callback(undefined);
}
};
for (var i = 0; i < items.length; i++) {
// Skip content if not image
if (items[i].type.indexOf("image") == -1) continue;
// Retrieve image on clipboard as blob
var blob = items[i].getAsFile();
if(typeof(callback) == "function"){
callback(blob);
}
}
}
HTML Code:
<span>
<button id="button-test">prueba</button>
</span>
<canvas style="border:1px solid grey;" id="mycanvas">
Errors:
Uncaught TypeError: Cannot read property 'items' of undefined
and refers to this line,
var items = pasteEvent.clipboardData.items;
I do not know what I'm doing wrong