Question

使用jquery，我可以通过ctrl-c或上下文菜单检测用户何时复制某些内容（如文本）：

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

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

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

Answer 1

浏览器没有复制图像事件，因此您需要通过一些技巧来模拟它。另外剪贴板不会将图像保存在其中。剪贴板只保存文本本身。您需要将图像转换为base64编码的字符串然后将它保存到剪贴板并将其粘贴到您的应用程序上。但是这有一个问题是剪贴板数据，复制的图像或其他一些应用程序的其他数据。为此，您可以添加一个唯一的字符串你的编码字符串首先和结束，并检查它在哪里粘贴它。为了将图像转换为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标记传递给此函数以获取结果。

如何检测＆＃34;复制图像＆＃34;浏览器事件？

1 个答案: