jquery to make chain triger of alt + printpant then to dump image on canvas

-1

I'm trying to create a button for bug reports: and I need to improve the code script to execute the following functions:

  • button handler report error.
  • trigger the alt + PrintScreen combo.
  • read the clipboard image.
  • convert the image to string (base64).
  • 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

        
    asked by Francisco Núñez 13.11.2017 в 19:59
    source

    1 answer

    0

    You can not trigger the combo ALT + Print Screen from javascript, because it is a system command and JS is in a sandbox where everything you do is circumscribed and limited to the current document.

    Imagine that what you are proposing could be done. You could trigger the CTRL + L event to lock the screen. Would it be a bit invasive, do not you think?

    What you can do is use libraries that convert a DOM object (or the full DOM) into a canvas, such as HTML2Canvas .

        
    answered by 14.11.2017 в 18:50