CODEWITHSUNDEEP
javascriptjquery
tmpearce
tmpearce

Reputation: 12693

How can I detect a "copy image" browser event?

Using jquery, I can detect when the user copies something (like text) with ctrl-c or through the context menu:

$(document).on('copy',function(e){$('body').prepend('copy event <br>');});

However, the event doesn't seem to trigger when an image is copied. How can I detect image-copy? Specifically I'd like to detect copying from a <canvas> element, but any <img> should do as a starting point for understanding this problem.

Test scenario: http://jsfiddle.net/jm23xe8w/

Upvotes: 6

Views: 1651

Answers (1)

OnlyMAJ
OnlyMAJ

Reputation: 819

Browsers doesn't have copy images event,so you need to simulate it by some tricks.also clipboard doesn't save images in it.Clipboard only saves texts in itself.You need to convert images to a base64 encoded string then save it to clipboard and paste it on your app.But there is an issue with this that Are the clipboard data , the copied images or there are some another data of some another application in it.For this, you can add a unique string to your encoded string at first and or at end and check it wherever you want to paste it.For converting the images to base64encode string you can use this code :

function getImageData(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var imgd = canvas.toDataURL("image/png");
    return imgd;
}

Pass the ‍‍‍‍img tag to this function to get your result.

Upvotes: 1

Related Questions