时间戳

首页 > 解决方案 > JS Canvas Drawing 有时只能工作？

javascript - JS Canvas Drawing 有时只能工作？

问题描述

我想创建一个用户可以在其上绘制的白板应用程序（我正在使用 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 不是很熟悉，所以我可能在这里遗漏了一些东西。

提前致谢

标签： javascripthtmlhtml5-canvasfilereader

解决方案

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

即使我建议使用更现代的 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>

推荐阅读