通过HTML上传/加载图像,并在JS Canvas上显示
我在JS和Html之间的交互方面相当新颖,我想知道是否可以通过HTML上传图像(按钮或放置它),并在JS Canvas上显示,这样我就可以通过纯Javascript修改它,不需要jQuery。通过HTML上传/加载图像,并在JS Canvas上显示
所以我可以例如像这样调用图像:Image(img,0,0)..在按下鼠标时添加背景或点。
我知道我在问什么,我怎么问,听起来可能很愚蠢,但正如我所说我是这个主题的新人。
我会很感激任何形式的帮助,例如一个类似问题的链接。
感谢
乔瓦尼
链接到原帖:*: 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>
嗨,非常感谢,我不会上传我现在做的事情,因为它现在令人尴尬, 但是,仍然在html画布上显示图像,我怎么能喜欢添加通过Javascript的图像点吗? –
请看[*:drawing-a-dot-on-html5-canvas](http://*.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>
后你已经完成的工作。 – CaptainHere
看看这个[*.com] javascript-upload-image-file-and-draw-into-a-canvas](http://*.com/questions/22255580/javascript-upload-image-file-and-绘制成画布) – Himanshu
但是,图像仍然显示在HTML画布上,我怎么可以通过Javascript在图像上添加点?我在:通过javascript绘制图像功能绘制 –