V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
zcf0508
V2EX  ›  问与答

关于 getImageData()不能按预期获取到数据的疑惑

  •  
  •   zcf0508 · 278 天前 · 555 次点击
    这是一个创建于 278 天前的主题,其中的信息可能已经有所发展或是发生改变。

    代码如下

    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    let image = new Image();
    image.onload = function() {
      ctx.drawImage(image, 0, 0, image.width, image.height);
      let imgData_obj = ctx.getImageData(0, 0, image.width, image.height);
      let imgData = imgData_obj.data
      // console.log(imgData) // 控制台打印是正常有数据的
      for (let i = 0; i < imgData.length; i += 4) {
        // 具体不写了
        // Q: 如果上面不打印,那么在第一次加载图片的时候,获取的数据全部为 0
        //    但是之后再进行同样操作的时候又是正常可以获取到的
        //    如果上面打印了,那么总是可以正常获取到
        //    再但是,如果我上面打印数据但是不打开浏览器的控制台,那么也是会出现获取不到数据的情况
      }
    }
    image.src = 'image_path'; // 访问没问题
    

    我试过给 getImageData()加 setTimeout ,但是是一样的情况。

    网上搜到的情况基本就 2 种观点,一个是图片跨域没获取到,但在我这里没有这个问题,二是要在 image.onlad 里 drawImage()和 getImageData(),但是都不太像我遇到的问题。

    还请各位赐教。

    5 条回复    2021-11-05 19:21:17 +08:00
    zcf0508
        1
    zcf0508  
    OP
       278 天前 via Android
    增加一个信息,第二次操作换一张照片也是可以的,只有第一次会有这个情况
    forgcode
        2
    forgcode  
       278 天前
    动态的设置下 canvas 的 width 、height
    zcf0508
        3
    zcf0508  
    OP
       278 天前
    @forgcode

    canvas.width = image.width; // <--
    canvas.height= image.height; // <--
    ctx.drawImage(image, 0, 0, image.width, image.height);

    加在了这里,一样有问题
    forgcode
        4
    forgcode  
       278 天前
    那就不知道了,width 、height 不设置好像默认 150 ,超出的图像内容就是 0 了!我本地测试了下没啥问题,浏览器 chrome 95.0.4638.69
    zcf0508
        5
    zcf0508  
    OP
       278 天前 via Android
    @forgcode 我从 chrome41 到 95 都有几率出现这个问题🤕
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2785 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 12:17 · PVG 20:17 · LAX 05:17 · JFK 08:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.