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功能