Question

我的代码可用于1个画布。但是我需要此实现才能在2个画布上使用。

所以我尝试了

  var SIGNATURE_2 = new CLIPBOARD_CLASS("signatureCanvas2", true);

问题是，这总是将图像粘贴在第一个画布中，我只需要按Ctrl + V。 如何仅在画布聚焦或悬停时粘贴？

////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // Copy paste Image to Canvas
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    var SIGNATURE = new CLIPBOARD_CLASS("signatureCanvas", true);
    var SIGNATURE_2 = new CLIPBOARD_CLASS("signatureCanvas2", 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              
                }
            }
        };
        //on keyboard press
        this.on_keyboard_action = function (event) {
            var 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;
        };
    }

.signatureCanvas {
    border:1px solid #027C8C;
    width: 100%;
    max-height:200px;
}

<canvas id="signatureCanvas" class="signatureCanvas"></canvas>
 
  <canvas id="signatureCanvas2" class="signatureCanvas"></canvas>

PS：请仅在Windows上打开截图工具，然后复制粘贴图像进行测试

Answer 1

您可以添加click事件以选择适当的画布：

    canvas_ids.forEach(function(canv) {
        document.getElementById(canv).addEventListener('click',     function (e) {
            canvas = document.getElementById(canv);
            ctx = document.getElementById(canv).getContext("2d");
        }, false);
    });

然后，您必须更改CLIPBOARD_CLASS的创建。

var SIGNATURE= new CLIPBOARD_CLASS(["signatureCanvas","signatureCanvas2"], true);

要确保默认情况下选择第一个画布，您必须进行以下更改：

var canvas = document.getElementById(canvas_ids[0]);
var ctx = document.getElementById(canvas_ids[0]).getContext("2d");

JSFiddle

Answer 2

我可能会从批发类中删除处理程序，并发生一个简单的keyup事件。

在此示例中，keyup处理程序已附加到文档元素。触发后，它会调用handleKeyUp进行检查，以查看将哪些元素悬停在上面。画布将是节点列表中的最后一个元素。在这里，代码将其抓取，然后将其绘制/取消绘制红色。将鼠标悬停在两个画布上，然后按一个键，您将明白我的意思。

document.addEventListener('keyup', handleKeyUp, false);

function handleKeyUp(e) {
  const hovers = document.querySelectorAll(':hover');
  const canvas = hovers[hovers.length - 1];
  paint(canvas); // or call a class method to paste to your canvas etc
}

function paint(c) {
  const isActive = c.classList.contains('active');
  isActive ? c.classList.remove('active') : c.classList.add('active');
}

canvas {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

canvas.active {
  background-color: red;
}

<canvas id="signatureCanvas" class="active"></canvas>
<canvas id="signatureCanvas2"></canvas>

用这种方法似乎更容易一些。

使用不同的参数两次调用函数

2 个答案: