Question

我在JS和Html之间的互动中相当新，我想知道是否可以通过HTML（按钮或删除它）上传图像，以及JS Canvas上的显示所以我可以通过Javascript pure修改它，没有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

<强>代码：

＆＃13;

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

＆＃13;

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

＆＃13;

通过HTML上传/加载图像，以及在JS Canvas上显示

2 个答案: