0

I would like to paste an image (which is currently in my clipboard) to a certain canvas. This paste-operation shall happen once I clicked a specific button on my page. There are two different routes to go:

  • Once the user clicked a button, fire an onPaste event, use the image as a blob and paste it on my canvas
  • After clicking the button, the js code reads the blob from the clipboard and paste it again on the canvas

I already played around window.clipboardData.getData or navigator.Clipboard, but none of them worked. Any hints?

I use the following code to visualize my blob image:

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);
}
while_true
  • 33
  • 1
  • 6
  • check this one https://developers.google.com/web/updates/2018/03/clipboardapi – Karen Grigoryan Feb 13 '19 at 20:40
  • Thanks. That was helpful. Now I am able to read Text from the clipboard after the user allowed it. However I can only see the capability to read data as Text. Any idea how to deal with images? – while_true Feb 14 '19 at 08:48
  • Yes indeed seems the access for non-text is still in [development](https://www.chromestatus.com/feature/5861289330999296) for Chrome, but available in Firefox. And the triggering of paste is prohibited in browsers, since it poses a security threat, the only way is through extension and permission query on extension manifest level like [explained here](https://stackoverflow.com/a/22702538/2998898) :( [This is my sandbox](https://codesandbox.io/s/xo3ql58voz) in case you find it helpful somehow, but this intends a human initiated paste from clipboard :( Sorry – Karen Grigoryan Feb 14 '19 at 12:55

0 Answers0