[英]HTML5 Canvas: I'm trying to load an image to the canvas
I'm trying to setup a canvas where the user can load a custom image. 我正在尝试设置一个画布,用户可以在其中加载自定义图像。 As far as I can tell everything should be set but for some reason it is not working.
据我所知,应该设置所有内容,但由于某种原因,它无法正常工作。
Here's my jsfiddle . 这是我的jsfiddle 。
HTML: HTML:
<canvas id="image-canvas" width="500" height="500" style="border:1px solid grey"></canvas>
<input type='file' id='fileInput' />
Javascript: Javascript:
var canvas = document.getElementById('image-canvas');
ctx = canvas.getContext('2d');
// Trigger the imageLoader function when a file has been selected
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', imageLoader(), false);
function imageLoader() {
var reader = new FileReader();
reader.onload = function(event) {
img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
}
img.src = reader.result;
}
reader.readAsDataURL(fileInput.files[0]);
}
You are calling imageLoader, not passing as a function to call. 您正在调用imageLoader,而不是作为要传递的函数传递。
Replace 更换
fileInput.addEventListener('change', imageLoader(), false);
by 通过
fileInput.addEventListener('change', imageLoader, false);
One line is wrong. 一行错误。 Here is the fixed line:
这是固定电话:
fileInput.addEventListener('change', imageLoader, false);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.