JS Canvas 绘图有时只能工作？

Question

我想创建一个用户可以在其上绘图的白板应用程序（我使用的是 HTML <canvas>）。我刚刚完成了一个导入 PNG 图像并将其绘制到 Canvas:

的函数的编码

var canvas = document.getElementById('can');
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
        
function drawImageOntoCanvas (e) {
        var input = e.target;
        var img = new Image();
        var reader = new FileReader();
        reader.onload = function(){
            var dataURL = reader.result;
            img.src = dataURL;
            ctx.drawImage(img, 10, 10);
        };
        reader.readAsDataURL(input.files[0]);
    }

<input id="uploadFromPC" type="file" accept='image/png' onchange="drawImageOntoCanvas(event);"></input>
<canvas id="can" width="1000px" height="500px" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>

这行得通，但只是出于某种原因。起初它不起作用，然后，当我重新加载页面时，它再次起作用。然后，它不起作用，但在重新加载后起作用等等。

我尝试在控制台中记录数据 URL，以及 reader 的结果。两者都工作得很好。

我是不是做错了什么？我对 JS 不是很熟悉，所以可能是我在这里遗漏了一些东西。

提前致谢

Answer 1

问题是，根据时间的不同，您可能会在图像完成加载之前绘制图像。

尽管我建议使用更现代的 JavaScript（addEventListener()、const、let、promises 等，但您可以按如下方式解决该问题。 ):

var canvas = document.getElementById('can');
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;

function drawImageOntoCanvas(e) {
  var input = e.target;
  var img = new Image();
  
  var reader = new FileReader();
  reader.onload = function() {
    img.src = reader.result;
    img.onload = function() {
      ctx.drawImage(img, 10, 10);
    }
  };
  reader.readAsDataURL(input.files[0]);
}

<input id="uploadFromPC" type="file" accept='image/png' onchange="drawImageOntoCanvas(event);"></input>
<canvas id="can" width="1000px" height="500px" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>

JS Canvas 绘图有时只能工作？

JS Canvas Drawing only works sometimes?

html

javascript

filereader

html5-canvas