HTML5 画布：我正在尝试将图像加载到 canvas

Question

我正在尝试设置一个 canvas，用户可以在其中加载自定义图像。据我所知，一切都应该设置好，但由于某种原因，它不起作用。

HTML：

<canvas id="image-canvas" width="500" height="500" style="border:1px solid grey"></canvas>
<input type='file' id='fileInput' />

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

Answer 1

您正在调用 imageLoader，而不是作为函数传递给调用。

替换

fileInput.addEventListener('change', imageLoader(), false);

来自

fileInput.addEventListener('change', imageLoader, false);

Answer 2

一行错了。这里是固定线路：

fileInput.addEventListener('change', imageLoader, false);

HTML5 画布：我正在尝试将图像加载到 canvas

HTML5 Canvas: I'm trying to load an image to the canvas

html

javascript

canvas