在方法内将图像 onload 添加到画布不起作用答案

【问题标题】：Adding image onload to canvas inside a method does not work在方法内将图像 onload 添加到画布不起作用
【发布时间】：2019-08-12 10:36:01
【问题描述】：

我有一个 Javascript 类，它有一个加载图像并将其添加到画布的方法。

一开始我是这样做的：

var context = this.cardCanvas.getContext('2d');
var cardWidth = this.cardWidth;
var img = new Image();
img.src = '../shared/images/logo.png';
context.drawImage(img, (cardWidth / 2) - (img.width / 2), 75);

这在 10 次中大约有 8 次有效，因此我一直在寻找一种解决方案，以使其每次都能始终如一地工作。许多网站和 SO 帖子声明使用这样的代码：

var context = this.cardCanvas.getContext('2d');
var cardWidth = this.cardWidth;
var img = new Image();
img.onload = function() {
    context.drawImage(img, (cardWidth / 2) - (img.width / 2), 75);
};
img.src = '../shared/images/logo.png';

但是当我这样做时，图像永远不会添加到画布中，尽管调试显示调用了 onload 方法。

有人有什么想法吗？

谢谢:)

【问题讨论】：

图像节点必须存在于您的 DOM 中。将图像添加到 DOM 末尾并设置父节点display: none

标签： javascript image canvas onload drawimage

【解决方案1】：

我认为第二个 sn-p 工作得很好，第一个根本不起作用，我不知道你是如何用第二个得到一个空白画布的，考虑下面的 sn-p，其中未选中的复选框呈现图像而没有onload event else onload event 正在定义中：

function load() {
  var context = cardCanvas.getContext('2d');
  var cardWidth = 500;
  var img = new Image();

  context.clearRect(100, 0, 200, 200);
  //unchecked - without onload
  if (!document.querySelector('input').checked) {
    img.src = 'http://placekitten.com/200/75';
    context.drawImage(img, (cardWidth / 2) - (img.width / 2), 75);
  }
  //checked - with onload
  else {
    img.onload = function() {
      context.drawImage(img, (cardWidth / 2) - (img.width / 2), 75);
    };
    img.src = 'http://placekitten.com/200/75';
  }
}

<input type="checkbox" />
<button onclick="load()">load</button>
<canvas id="cardCanvas"></canvas>

【讨论】：