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

我在JS和Html之间的交互方面相当新颖，我想知道是否可以通过HTML上传图像（按钮或放置它），并在JS Canvas上显示，这样我就可以通过纯Javascript修改它，不需要jQuery。通过HTML上传/加载图像，并在JS Canvas上显示

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

我知道我在问什么，我怎么问，听起来可能很愚蠢，但正如我所说我是这个主题的新人。

我会很感激任何形式的帮助，例如一个类似问题的链接。

感谢

乔瓦尼

来源

2017-03-05 Gio Vanni

后你已经完成的工作。 – CaptainHere

看看这个[stackoverflow.com] javascript-upload-image-file-and-draw-into-a-canvas]（http://stackoverflow.com/questions/22255580/javascript-upload-image-file-and-绘制成画布） – Himanshu

但是，图像仍然显示在HTML画布上，我怎么可以通过Javascript在图像上添加点？我在：通过javascript绘制图像功能绘制 –

-1

链接到原帖：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>

来源

2017-03-05 18:33:23 Himanshu

嗨，非常感谢，我不会上传我现在做的事情，因为它现在令人尴尬，但是，仍然在html画布上显示图像，我怎么能喜欢添加通过Javascript的图像点吗？ –

请看[stackoverflow：drawing-a-dot-on-html5-canvas]（http://stackoverflow.com/questions/7812514/drawing-a-dot-on-html5-canvas）你已经获得了上下文在'context'变量中的画布。 – Himanshu

所以，一旦我选择了文件，就没有办法预先加载它，然后通过函数draw [image（img，0，0）来显示它，就像我已经将它预加载到assets文件夹中一样！ –

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

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>

来源

2017-03-05 21:31:36 m87

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

回答

相关问题