如何檢測“復制圖像”瀏覽器事件？

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標簽此功能，讓您的結果。