我有一个包含 iframe 的网页，该 iframe 包含一个表格，其中最多包含 1,000 个 Canvas 元素。 Canvas 元素由 iframe 中定义的函数填充，该函数由父页面调用。该函数迭代并使用父页面隐藏范围中包含的 base64 数据 URI 填充每个 Canvas 。我读过其他一些关于类似问题的 Stackoverflow 帖子，但我已经尝试过最常用的建议(使用 onload)，但这似乎不起作用。我对 html/javascript 相当陌生，所以我怀疑我是否以最好的方式做事。我希望有人可以指导我如何确保所有 Canvas 元素在第一次加载时成功填充 Base64 数据，这样我就不需要多次刷新来获取缩略图？这是一些代码，它是从我的 html 页面中经过非常精简的代码。如果我要粘贴整个页面，可能有点太多了，无法明智地处理。以下是我认为重要的参与者。
我对函数的 onload 调用填充了 Canvas ，这是在包含 iframe 的主页上 -
<body onload="document.getElementById('framePage').contentWindow.fillCans();">
这是包含在framePage iframe 中的fillCans() 函数(我可能应该将其移动到主html 页面，但到目前为止，这就是脚本的演变方式...哈哈)。如果您愿意，pgCnt 元素包含“计数器”数字。它将定义要迭代的元素数量。当分配 var c 时，“can”+i 元素是 Canvas 。当分配 var imgSrc 时，“span”+i 元素是父页面上隐藏的 span 元素，其中包含基本 64 数据 URI -
function fillCans() {
var cnt = document.getElementById("pgCnt").innerHTML;
var cnt = cnt.split("-");
var cnt1 = cnt[0];
var cnt2 = cnt[1];
for (var i=cnt1; i <= cnt2; i++) {
var targ = "span"+i
var c = document.getElementById("can"+i);
var ctx = c.getContext("2d");
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0,0,128,128);
var image = new Image();
var imgSrc = parent.document.getElementById("span"+i).innerHTML;
imgSrc = imgSrc.split("*");
image.src = imgSrc[0];
ctx.drawImage(image,0,0);
}
就像我说的，这会加载得很好，firebug 报告没有错误，但是所有 Canvas 都是白色的，没有缩略图。当我点击刷新几次时，它们终于全部加载了。我读过图像数据是异步加载的，但我不确定这意味着什么，我认为这意味着它不遵守 onload 的规则？无论如何，像往常一样，感谢 stackoverflow 社区的所有帮助。如果知道如何在首页加载时成功加载这些缩略图，那就太好了。
在 @Sebastian 的伟大建议之后，我能够让我的 JavaScript 正常运行。我正在粘贴新功能。按照目前的情况，以防有人遇到类似的问题。我必须对绘制图像的函数实现 onload 调用，然后在 IIFE for 循环中使用以确保每个缩略图都是使用正确的迭代数据绘制的。
function fillCans() {
var cnt = document.getElementById("pgCnt").innerHTML;
var cnt = cnt.split("-");
var cnt1 = cnt[0];
var cnt2 = cnt[1];
for (var i=cnt1; i <= cnt2; i++) {
(function(iterable){
var c = document.getElementById("can"+iterable);
var ctx = c.getContext("2d");
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0,0,128,128);
var image = new Image();
var imgSrc = parent.document.getElementById("span"+iterable).innerHTML;
imgSrc = imgSrc.split("*");
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = imgSrc[0];
})(i);
}
}
最佳答案
你是对的，问题是必须先加载图像，然后才能绘制它。
在您的情况下，您调用时 image 未加载
ctx.drawImage(image,0,0);
但是稍后，浏览器缓存了图像 URL，并且在调用源属性分配和 drawImage 调用之间，浏览器已经从缓存中检索了图像。
要使其在任何情况下都能工作，您需要等待图像加载:
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = imgSrc[0];
请务必先注册回调，然后设置src。
关于javascript - 为什么我的 Canvas 仅在刷新时加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18018962/