如何识别单击了哪个画布答案

【问题标题】：How to identify which canvas was clicked如何识别单击了哪个画布
【发布时间】：2014-06-07 16:12:58
【问题描述】：

在下面的代码中有两个画布，单击它们将打开文件浏览器以打开图像。我想在单击的画布中显示打开的图像。但是

1) 问题是一旦控件在handleFile 中，我不知道最初点击了哪一个画布！我该怎么做或如何将画布作为参数传递给函数 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]);
}

【问题讨论】：

标签： javascript jquery html canvas callback

【解决方案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，这样你就不会保留最后一个事件。

Fiddle

【讨论】：

谢谢。如果我想在单击 canvas1 时在 textarea1 上写一些东西，在单击 canvas2 时写到 textarea2 怎么办？
你可以检查 'clickedCanvas.id' 的 id 来抓取你想要的文本区域