2014-11-03 92 views
6

使用jQuery,我可以檢測用戶何時複製的東西(如文本),用Ctrl-C或通過上下文菜單:如何檢測「複製圖像」瀏覽器事件?

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

然而,事件似乎並沒有當圖像被複制到觸發。我如何檢測圖像複製?具體而言,我想檢測<canvas>元素的複製,但任何<img>都應該作爲理解此問題的起點。

測試場景:在itself.You http://jsfiddle.net/jm23xe8w/

+0

這可能會幫助你:http://www.quirksmode.org/dom/events/cutcopypaste.html – gurudeb 2014-11-03 15:25:40

+0

你的目標是捕捉這個事件? – 2014-11-03 19:42:26

+0

@AlmaDo我需要用戶將圖像複製到他們的剪貼板,然後回到瀏覽器 - 這將允許使用來自跨網站圖像原始圖像的像素數據(沒有安全風險,因爲它是明確的用戶操作)。所以,當他們啓動一個複製事件時,我將啓用粘貼功能,使其直觀地顯示它的工作原理。 – tmpearce 2014-11-04 00:00:50

回答

0

瀏覽器不支持複製圖像的事件,所以你需要通過一些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標記傳遞給此函數以獲取結果。