web-dev-qa-db-ja.com

Firefoxの画像データをクリップボードから純粋なJavascriptのキャンバス要素に貼り付けるにはどうすればよいですか？

Firefoxの最新バージョンで動作するシンプルで関連性の高い最新の例を見つけるために最善を尽くしましたが、本当に苦労しています。

タイトルはそれを本当に言っています。ユーザーに、Windowsペイントなどのエディターから画像の一部をコピーするか、[画面の印刷]ボタンを使用して、それをキャンバス要素に貼り付けてほしい。キャンバスが、貼り付けられたイメージに正確に合うようにサイズ変更された場合、ボーナスはポイントします（文字通り）。

FlashまたはJavaベースのソリューションが妥当な場合は回避します。

私はJavascriptに中途半端ですが、最新のHTML5機能には比較的経験が浅く、Canvas要素はまったく新しいです。助けてください！

javascripthtml5firefoxcanvas
36
DG.

バージョン2.0：小さくてきれいなコードは、Chrome、Firefox、Edge、Operaで動作します。ハッキングはもうありません。ただし、サポートが必要な場合は、IEおよびSafari、v1バージョンを確認してください。

http://jsfiddle.net/viliusl/xq2aLj4b/5/

バージョン1.0Chrome実装は簡単です。Firefox（およびIE）には、ユーザーがペーストのようにコマンドを与えなければならない制限がありますキーボードイベントと編集可能な入力はフォーカスする必要があるため、ここでトリックを行います。Ctrlキーを押すと、その入力フィールドをフォーカスし、フォーカスを解除します。

ブラウザのサポート（画像データ）：

  • Firefox
  • Chrome
  • 縁
  • IE-11
  • Opera
var CLIPBOARD = new CLIPBOARD_CLASS("my_canvas", true);

/**
 * image pasting into canvas
 * 
 * @param {string} canvas_id - canvas id
 * @param {boolean} autoresize - if canvas will be resized
 */
function CLIPBOARD_CLASS(canvas_id, autoresize) {
        var _self = this;
        var canvas = document.getElementById(canvas_id);
        var ctx = document.getElementById(canvas_id).getContext("2d");
        var ctrl_pressed = false;
        var command_pressed = false;
        var paste_event_support;
        var pasteCatcher;

        //handlers
        document.addEventListener('keydown', function (e) {
                _self.on_keyboard_action(e);
        }, false); //firefox fix
        document.addEventListener('keyup', function (e) {
                _self.on_keyboardup_action(e);
        }, false); //firefox fix
        document.addEventListener('paste', function (e) {
                _self.paste_auto(e);
        }, false); //official paste handler

        //constructor - we ignore security checks here
        this.init = function () {
                pasteCatcher = document.createElement("div");
                pasteCatcher.setAttribute("id", "paste_ff");
                pasteCatcher.setAttribute("contenteditable", "");
                pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;width:10px;margin-left:-20px;';
                document.body.appendChild(pasteCatcher);

                // create an observer instance
                var observer = new MutationObserver(function(mutations) {
                        mutations.forEach(function(mutation) {
                                if (paste_event_support === true || ctrl_pressed == false || mutation.type != 'childList'){
                                        //we already got data in paste_auto()
                                        return true;
                                }

                                //if paste handle failed - capture pasted object manually
                                if(mutation.addedNodes.length == 1) {
                                        if (mutation.addedNodes[0].src != undefined) {
                                                //image
                                                _self.paste_createImage(mutation.addedNodes[0].src);
                                        }
                                        //register cleanup after some time.
                                        setTimeout(function () {
                                                pasteCatcher.innerHTML = '';
                                        }, 20);
                                }
                        });
                });
                var target = document.getElementById('paste_ff');
                var config = { attributes: true, childList: true, characterData: true };
                observer.observe(target, config);
        }();
        //default paste action
        this.paste_auto = function (e) {
                paste_event_support = false;
                if(pasteCatcher != undefined){
                        pasteCatcher.innerHTML = '';
                }
                if (e.clipboardData) {
                        var items = e.clipboardData.items;
                        if (items) {
                                paste_event_support = true;
                                //access data directly
                                for (var i = 0; i < items.length; i++) {
                                        if (items[i].type.indexOf("image") !== -1) {
                                                //image
                                                var blob = items[i].getAsFile();
                                                var URLObj = window.URL || window.webkitURL;
                                                var source = URLObj.createObjectURL(blob);
                                                this.paste_createImage(source);
                                        }
                                }
                                e.preventDefault();
                        }
                        else {
                                //wait for DOMSubtreeModified event
                                //https://bugzilla.mozilla.org/show_bug.cgi?id=891247
                        }
                }
        };
        //on keyboard press
        this.on_keyboard_action = function (event) {
                k = event.keyCode;
                //ctrl
                if (k == 17 || event.metaKey || event.ctrlKey) {
                        if (ctrl_pressed == false)
                                ctrl_pressed = true;
                }
                //v
                if (k == 86) {
                        if (document.activeElement != undefined && document.activeElement.type == 'text') {
                                //let user paste into some input
                                return false;
                        }

                        if (ctrl_pressed == true && pasteCatcher != undefined){
                                pasteCatcher.focus();
                        }
                }
        };
        //on kaybord release
        this.on_keyboardup_action = function (event) {
                //ctrl
                if (event.ctrlKey == false && ctrl_pressed == true) {
                        ctrl_pressed = false;
                }
                //command
                else if(event.metaKey == false && command_pressed == true){
                        command_pressed = false;
                        ctrl_pressed = false;
                }
        };
        //draw pasted image to canvas
        this.paste_createImage = function (source) {
                var pastedImage = new Image();
                pastedImage.onload = function () {
                        if(autoresize == true){
                                //resize
                                canvas.width = pastedImage.width;
                                canvas.height = pastedImage.height;
                        }
                        else{
                                //clear canvas
                                ctx.clearRect(0, 0, canvas.width, canvas.height);
                        }
                        ctx.drawImage(pastedImage, 0, 0);
                };
                pastedImage.src = source;
        };
}
1. Copy image data into clipboard or press Print Screen <br>
2. Press Ctrl+V (page/iframe must be focused):
<br /><br />
<canvas style="border:1px solid grey;" id="my_canvas" width="300" height="300"></canvas>
64
ViliusL

ViliusLの答えは素晴らしいですが、貼り付けられた画像をキャプチャするための簡単なクロスブラウザ方法を探している人には：

window.addEventListener("paste", async function(e) {
  e.preventDefault();
  e.stopPropagation();
  let file = e.clipboardData.items[0].getAsFile();
  let objectUrl = URL.createObjectURL(file);
  // do something with url here
});

画像ではないものを貼り付ける場合に備えて、おそらく（ViliusLの答えのように）エラーチェックを行うことをお勧めします。 MDNによると、 clipboardData はすべての最新のブラウザーで機能します。 ChromeとFirefoxでテストしましたが、正常に動作します。

1
user993683