Javascript Canvas图像并不总是加载[重复]答案

【问题标题】：Javascript Canvas images don't always load [duplicate]Javascript Canvas图像并不总是加载[重复]
【发布时间】：2018-12-19 00:42:38
【问题描述】：

有时我的图片会在我第一次访问页面时加载，而其他时候我必须刷新它们才能加载。有时也会加载一张图片而不是另一张。

//Store everything in arrays
var dimgs = ["hair-1", "head-1"]; //Name of classes for imgs
var cans = ["hairimg", "headimg"]; //Canvas element names
var dcans = ["chairimg", "cheadimg"]; //Canvas names
var dctxs = ["ctxa", "ctxb"]; //Context names
var defimgs = []; //Images found

//Loop to create Canvas and draw image
for (var p = 0; p < 2; p++) {
    if(p != null) {
       getcan(p);
    }
}

//Function to create Canvas and draw image
function getcan(p) {
    defimgs[p] = document.getElementsByClassName(dimgs[p])[0].getElementsByTagName('img')[0];
    var x;
    if(p != null) {
       defimgs[p].onload = (function(x){
          dcans[x] = document.getElementById(cans[x]);
          dctxs[x] = dcans[x].getContext('2d');
          dcans[x].width = defimgs[x].naturalWidth;
          dcans[x].height = defimgs[x].naturalHeight;
          dctxs[x].drawImage(defimgs[x], 0, 0);
       }(p));
    }
}

我还尝试了以下方法，结果相同：

//Store everything in arrays
var dimgs = ["hair-1", "head-1"]; //Name of classes for imgs
var cans = ["hairimg", "headimg"]; //Canvas element names
var dcans = ["chairimg", "cheadimg"]; //Canvas names
var dctxs = ["ctxa", "ctxb"]; //Context names
var defimgs = []; //Images found

//Loop to create Canvas and draw image
for (var p = 0; p < 2; p++) {
    if(p != null) {
       defimgs[p] = document.getElementsByClassName(dimgs[p])[0].getElementsByTagName('img')[0];
       dcans[p] = document.getElementById(cans[p]);
       dctxs[p] = dcans[p].getContext('2d');
       dcans[p].width = defimgs[p].naturalWidth;
       dcans[p].height = defimgs[p].naturalHeight;
       getcan(p);
    }
}

//Function to draw image
function getcan(p) {
    var x;
    if(p != null) {
       defimgs[p].onload = (function(x){
          dctxs[x].drawImage(defimgs[x], 0, 0);
       }(p));
    }
}

HTML：

<div>
  <canvas id="hairimg" style="border: 1px solid #000;"></canvas>
</div>
<div>
  <canvas id="headimg" style="border: 1px solid #000;"></canvas>
</div>
<div class="hair-1"">
  <img src="hair.png" alt="User Image">
</div>
<div class="head-1"">
  <img src="head.png" alt="User Image">
</div>

我只是不知道使用div 类将位于div 标记中的多个图像加载到canvas 上的正确方法。

【问题讨论】：

你正在执行onload = ...之后的函数。因此，您分配给 onload 的内容是该函数的返回值 (undefined)，并且您的函数会直接执行（因此可能在图像加载之前）。将尝试找到众多受骗者之一...

标签： javascript loops for-loop if-statement canvas

【解决方案1】：

您可能需要考虑使用 window.onload。此回调仅在页面上的所有图像完成加载后才会触发，因此此时处理您的图像可能会更成功。这里有一个stack overflow post 提供更多信息，还有the documentation for window.onload。

你可以这样组织它：

window.onload = function() {
    dimgs.forEach(function(img) {
        getcan(img);
    });
}

【讨论】：

到目前为止似乎有效。谢谢！