如何检测"复制图像"浏览器事件？

Question

使用jquery,我可以检测用户何时使用ctrl-c或通过上下文菜单复制内容(如文本):

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

但是,复制图像时似乎不会触发事件.如何检测图像复制？具体来说,我想检测一个<canvas>元素的复制,但任何<img>应该作为理解这个问题的起点.

测试场景:http://jsfiddle.net/jm23xe8w/

Answer 1

浏览器没有复制图像事件，所以需要通过一些技巧来模拟它。而且剪贴板不保存图像。剪贴板本身只保存文本。您需要将图像转换为base64编码的字符串然后保存它到剪贴板并将其粘贴到您的应用程序上。但是存在一个问题，即剪贴板数据、复制的图像还是其中有其他应用程序的其他数据。为此，您可以向您的应用程序添加一个唯一的字符串在开头和/或末尾编码字符串，然后在要粘贴的位置检查它。要将图像转换为 base64encode 字符串，您可以使用以下代码：

\n\n

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

\n\n

传递 \xe2\x80\x8d\xe2\x80\x8d\xe2\x80\x8d\xe2\x80\x8dimg标签传递给此函数以获得结果。

\n