如何識別單擊了哪個畫布

Question

在下面的代碼中，單擊兩個畫布，將打開文件瀏覽器以打開圖像。 我想在單擊的畫布上顯示打開的圖像。 但

1）問題是一旦控件位於handleFile中，我不知道最初單擊了哪個畫布！ 我該怎么做或如何將canvas作為參數傳遞給handleFile函數？

2）如果我想在canvas1上單擊時要在textarea1上寫一些東西，而在canvas2上單擊時要寫在textarea2上怎么辦？

<html>
<head>
</head>

<body>

    <input type="file" id="fileLoader" name="fileLoader" style="display: none" />

    <canvas id="bufferCanvas"></canvas>
    <canvas id="canvas1" width="200" height="200" style="cursor:pointer; border:2px solid #000000"></canvas>
    <canvas id="canvas2" width="200" height="200" style="cursor:pointer; border:2px solid #ff6a00"></canvas>
    <textarea id="textarea1" rows="4" cols="50"></textarea>
    <textarea id="textarea2" rows="4" cols="50"></textarea>
    <script src="upload.js"></script>

</body>
</html>

這是upload.js

var fileLoader = document.getElementById('fileLoader');
var bufferCanvas = document.getElementById('bufferCanvas');
var allCanvases = document.getElementsByTagName("Canvas");

for (var i = 1; i < allCanvases.length; ++i) {
    allCanvases[i].getContext("2d").fillStyle = "blue";
    allCanvases[i].getContext("2d").font = "bold 20px Arial";
    allCanvases[i].getContext("2d").fillText("image " + i + " of 1", 22, 20);
    allCanvases[i].onclick = function (e) {
        fileLoader.click(e);
    }

}

fileLoader.addEventListener('change', handleFile, false);
var textarea1 = document.getElementById('textarea1');
var ctx = bufferCanvas.getContext('2d');

function handleFile(e) {
    // I wanna know what canvas was clicked 
    //So I can display the image on the canvas which was clicked
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            bufferCanvas.width = img.width;
            bufferCanvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            dataURL = bufferCanvas.toDataURL('image/png');  // here is the most important part because if you dont replace you will get a DOM 18 exception;
            // window.location.href = dataURL;// opens it in current windows for testing
            textarea1.innerHTML = dataURL;
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

在此處輸入圖片說明

Answer 1

問題是畫布的onclick觸發了具有自己事件的文件fileloader的單擊。 要執行您想要的操作，可以創建全局變量來保存被單擊的<canvas> 。

var fileLoader = document.getElementById('fileLoader');
var bufferCanvas = document.getElementById('bufferCanvas');
var allCanvases = document.getElementsByTagName("Canvas");
var clickedCanvas = ''; //<---- will hold the triggering canvas

然后在您的onclick函數中，您可以將html element設置為clickedCanvas

for (var i = 1; i < allCanvases.length; ++i) {
  ...
  ...
  ...
  allCanvases[i].onclick = function (e) {
    clickedCanvas = e.srcElement; // <--- set the clicked on canvas
    fileLoader.click(e);
  }
}

現在在function handleFile(e)您應該能夠從clickedCanvas獲取畫布

同樣，在完成后，我也會清除clickedCanvas ，以免保留最后一個事件。

小提琴

如何識別單擊了哪個畫布

問題描述

1 個解決方案

解決方案1
0 2014-06-07 06:54:43

如何識別單擊了哪個畫布

問題描述

1 個解決方案

解決方案1 0 2014-06-07 06:54:43

解決方案1
0 2014-06-07 06:54:43