クリップボードイメージをキャンバスに貼り付けます

Question

イメージを貼り付けるにはユーザーが必要とするキャンバスがあります。 私はこれをクロスブラウザにしたいと思います。私はhtml/javascriptだけを使用したいと思います。私はまた、フラッシュオブジェクトを使用する意思があります。

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アプレットを使用してこれを実現すると説明しています。