javascript - 通过HTML上传/加载图像，并在JS Canvas 上显示

我在JS和Html之间的交互方面还很陌生，我想知道是否可以通过HTML（一个按钮或将其拖放）上传图像，并在JS画布上显示，以便我可以通过它进行修改纯JavaScript，没有jQuery。

因此，我可以例如这样调用图像：Image（img，0，0）..按下鼠标时在其上添加背景或点。

我知道我的要求以及如何提出要求听起来听起来很愚蠢，但是正如我所说的那样，我是这个领域的新手。

我将不胜感激，例如提供指向相似问题的链接。

谢谢

乔万尼

最佳答案

也许，您可以尝试这样的事情...

var fileUpload = document.getElementById('fileUpload');
var canvas  = document.getElementById('canvas');
var ctx = canvas.getContext("2d");

function readImage() {
    if ( this.files && this.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
           var img = new Image();
           img.src = e.target.result;
           img.onload = function() {
             ctx.drawImage(img, 0, 0, 512, 512);
           };
        };
        FR.readAsDataURL( this.files[0] );
    }
}

fileUpload.onchange = readImage;

canvas.onclick = function(e) {
  var x = e.offsetX;
  var y = e.offsetY;
  ctx.beginPath();
  ctx.fillStyle = 'black';
  ctx.arc(x, y, 5, 0, Math.PI * 2);
  ctx.fill();
};

#canvas {
  border: 1px solid black;
  margin-top: 10px;
}

<input type='file' id="fileUpload"/>
<canvas id="canvas" width="512" height="512"></canvas>