JS Canvas Drawing 有时只能工作？答案

【问题标题】：JS Canvas Drawing only works sometimes?JS Canvas Drawing 有时只能工作？
【发布时间】：2021-02-01 08:06:42
【问题描述】：

我想创建一个用户可以在其上绘图的白板应用程序（我使用的是 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，以及阅读器的结果。两者都工作得很好。

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

提前致谢

【问题讨论】：

你的脚本放在html文件的什么位置？是在 head 标签里面吗？

标签： javascript html html5-canvas filereader

【解决方案1】：

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

即使我建议使用更现代的 JavaScript（addEventListener()、const、let、promise 等），您也可以按如下方式解决：

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>

【讨论】：