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

问题描述：

使用jQuery，我可以检测用户何时复制的东西（如文本），用Ctrl-C或通过上下文菜单：如何检测“复制图像”浏览器事件？

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

然而，事件似乎并没有当图像被复制到触发。我如何检测图像复制？具体而言，我想检测<canvas>元素的复制，但任何<img>都应该作为理解此问题的起点。

测试场景：在itself.You http://jsfiddle.net/jm23xe8w/

这可能会帮助你：http://www.quirksmode.org/dom/events/cutcopypaste.html – gurudeb 2014-11-03 15:25:40

你的目标是捕捉这个事件？ – 2014-11-03 19:42:26

@AlmaDo我需要用户将图像复制到他们的剪贴板，然后回到浏览器 - 这将允许使用来自跨网站图像原始图像的像素数据（没有安全风险，因为它是明确的用户操作）。所以，当他们启动一个复制事件时，我将启用粘贴功能，使其直观地显示它的工作原理。 – tmpearce 2014-11-04 00:00:50

答

浏览器不支持复制图像的事件，所以你需要通过一些tricks.also剪贴板来模拟它不保存图像it.Clipboard只保存文本需要将图像转换为base64编码的字符串，然后将其保存到剪贴板并将其粘贴到您的应用程序上。但是存在这样的问题：剪贴板数据，复制的图像或其他某个应用程序的其他数据是否存在.For这样，您可以首先在您的编码字符串中添加一个唯一的字符串，并在结尾处添加并检查它在何处粘贴。要将图像转换为base64encode字符串，您可以使用以下代码：

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; 
}

将img标记传递给此函数以获取结果。

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

相关推荐