如何识别单击了哪个画布

Question

In the code below there are two canvases clicking on which will open the file browser to open an image. 在下面的代码中，单击两个画布，将打开文件浏览器以打开图像。 I want to display the opened image in that canvas which was clicked. 我想在单击的画布上显示打开的图像。 but 但

1) the problem is once the control is inside the handleFile I don't know which one of the canvases was originally clicked! 1）问题是一旦控件位于handleFile中，我不知道最初单击了哪个画布！ how can I do that or how can I pass the canvas as parameter to the function handleFile ? 我该怎么做或如何将canvas作为参数传递给handleFile函数？

2)what if I wanted to write something onto textarea1 when clicked on canvas1, write to textarea2 when clicked on canvas2? 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>

and here is upload.js 这是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

The problem is the onclick for the canvas is firing a click for the fileloader which has it's own event. 问题是画布的onclick触发了具有自己事件的文件fileloader的单击。 To do what you want you can create global var to hold the <canvas> that was clicked. 要执行您想要的操作，可以创建全局变量来保存被单击的<canvas> 。

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

Then in your onclick function you can set html element to clickedCanvas 然后在您的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);
  }
}

Now in function handleFile(e) you should be able to get the canvas from clickedCanvas 现在在function handleFile(e)您应该能够从clickedCanvas获取画布

Also I would clear out clickedCanvas after you are done so you aren't retaining the last event. 同样，在完成后，我也会清除clickedCanvas ，以免保留最后一个事件。

Fiddle 小提琴

如何识别单击了哪个画布

问题描述

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