使用不同的參數兩次調用函數

Question

我的代碼可用於1張畫布。 但是我需要這個實現才能為canvas 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處理程序附加到document元素。 觸發后，它會調用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> 

用這種方法似乎更容易一些。