如何识别单击了哪个画布

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