將剪貼板圖像粘貼到畫布

Question

我有一個畫布，我需要用戶能夠粘貼圖像。 我想這是跨瀏覽器。我只想使用html/javascript。我也願意使用flash對象。

Answer 1

這在Chrome中運行正常，但至今我還沒有能夠弄清楚如何讓它在Firefox中工作。你可以使用這個jQuery插件來檢測剪貼板粘貼。我假設你知道如何從剪貼板獲取數據後繪製圖像。

# jquery.paste_image_reader.coffee 
(($) -> 
    $.event.fix = ((originalFix) -> 
    (event) -> 
     event = originalFix.apply(this, arguments) 

     if event.type.indexOf('copy') == 0 || event.type.indexOf('paste') == 0 
     event.clipboardData = event.originalEvent.clipboardData 

     return event 

)($.event.fix) 

    defaults = 
    callback: $.noop 
    matchType: /image.*/ 

    $.fn.pasteImageReader = (options) -> 
    if typeof options == "function" 
     options = 
     callback: options 

    options = $.extend({}, defaults, options) 

    this.each() -> 
     element = this 
     $this = $(this) 

     $this.bind 'paste', (event) -> 
     found = false 
     clipboardData = event.clipboardData 

     Array::forEach.call clipboardData.types, (type, i) -> 
      return if found 
      return unless type.match(options.matchType) 

      file = clipboardData.items[i].getAsFile() 

      reader = new FileReader() 

      reader.onload = (evt) -> 
      options.callback.call(element, file, evt) 

      reader.readAsDataURL(file) 

      found = true 

)(jQuery) 

要使用：

$("html").pasteImageReader 
    callback: (file, event) -> 
    # Draw the image with the data from 
    # event.target.result 

Answer 2

據我所知，沒有辦法只用JavaScript和HTML來做到這一點。但是，this blog post描述了使用Java小應用程序實現這一點