通过 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>

Answer 2

原帖链接：stackoverflow: javascript-upload-image-file-and-draw-it-into-a-canvas

代码：

function el(id){return document.getElementById(id);} // Get elem by ID

var canvas  = el("canvas");
var context = canvas.getContext("2d");

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

el("fileUpload").addEventListener("change", readImage, false);

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