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

Question

我对 JS 和 Html 之间的交互很陌生，我想知道是否可以通过 HTML(按钮或放置它)上传图像，并在 JS Canvas 上显示，以便我可以通过纯粹的Javascript修改它，没有jQuery。

所以我可以这样调用图像:Image(img, 0, 0)..按下鼠标时在其上添加背景或点。

我知道我的要求以及我的要求可能听起来很愚蠢，但正如我所说，我在这个主题上是新手。

我将不胜感激任何形式的帮助，例如类似问题的链接。

谢谢

乔瓦尼

Answer 1

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

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>