个人中心
gpt4 book ai didi

javascript - 为什么我的 Canvas 仅在刷新时加载？

转载 作者：行者123 更新时间：2023-12-02 18:29:03 25 4
gpt4 key购买 nike

我有一个包含 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。

参见HTML Canvas DrawImage Tutorial

关于javascript - 为什么我的 Canvas 仅在刷新时加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18018962/

25 4 0
文章推荐： javascript - 页面加载后如何让视频在特定位置开始播放？
文章推荐： javascript - 将表添加到我的 dojo 代码中
文章推荐： javascript - 如何在单击按钮时更改 onclick 函数值
文章推荐： javascript - 当子 iframe 获得焦点时，防止文档丢失键绑定(bind)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com