2

我有一个包含 iframe 的网页，iframe 包含一个包含多达 1,000 个画布元素的表格。画布元素由 iframe 中定义的函数填充，该函数由父页面调用。该函数迭代并使用包含在父页面的隐藏跨度中的 base64 数据 URI 填充每个画布。我已经阅读了其他一些关于类似问题的 Stackoverflow 帖子，但我已经尝试了最常用的建议（使用 onload），但这似乎不起作用。我对 html/javascript 相当陌生，所以我怀疑我是否以最好的方式做事。我希望有人可以指导我如何确保所有画布元素在第一次加载时都成功填充了 base64 数据，所以我不需要多次刷新来获取缩略图？这是一些代码，它是我的 html 页面中非常精简的代码。如果我要粘贴整个页面，处理起来可能有点过分。以下是我认为的重要演员。

我对填充画布的函数的 onload 调用，这是在包含 iframe 的主页上 -

<body onload="document.getElementById('framePage').contentWindow.fillCans();">

这是包含在 framePage iframe 中的 fillCans() 函数（我可能应该将其移动到主 html 页面，但到目前为止，这就是脚本的发展方式……哈哈）。如果您愿意，pgCnt 元素包含“计数器”数字。它将定义要迭代的元素数量。当分配 var c 时，“can”+i 元素是画布。当分配 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);
    }

就像我说的，这将加载正常，萤火虫报告没有错误，但是所有的画布都是白色的，没有缩略图。当我点击刷新几次时，它们最终都加载了。我读过图像数据是异步加载的，但我不确定这意味着什么，我认为这意味着它不符合 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);
}
}
4

1 回答 1

3

你是对的，问题是必须先加载图像，然后才能绘制它。在您image致电时未加载您的情况

ctx.drawImage(image,0,0);

然而，稍后浏览器已经缓存了图像 URL，并且在对源属性分配的drawImage调用和浏览器已经从缓存中检索图像的调用之间。

要使其在任何情况下都能正常工作，您需要等待图像加载：

  image.onload = function() {
    ctx.drawImage(image, 0, 0);
  };
  image.src = imgSrc[0];

请务必先注册回调，然后设置src.

请参阅HTML Canvas DrawImage 教程

于 2013-08-02T14:54:34.637 回答