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]);
}

enter image description here

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所以你没有保留最后一个事件。

Fiddle

如何识别单击了哪个画布

1 个答案: