Canvas.drawImage不起作用

Question

我知道这个问题已经被问过很多次了，但是我无法弄清楚我在做什么错

 var canvas = document.getElementById('myCanvas'); function handleFiles(files) { var preview = document.getElementById('preview'); for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /^image\\//; if (!imageType.test(file.type)) { continue; } var img = document.createElement("img"); img.classList.add("obj"); img.src = URL.createObjectURL(file); preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed. img.onload = drawImage(img); } } var drawImage = function(img) { var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); } 

 <div id="preview"></div> <input type="file" onchange="handleFiles(this.files)"> <canvas id="myCanvas"></canvas> 

Answer 1

演示

它应该是

img.onload = function(){drawImage(img)};

如果没有方法参数，则可以调用

img.onload = drawImage;

代替

 img.onload = drawImage()// not correct

语法是

x.onload = funcRef;//reference

。如果您分配应先分配函数引用drawImage(img)然后返回的值drawImage(img)将被分配到为onload功能