微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jsdom + canvas的toDataURL在节点上的不同结果

如何解决jsdom + canvas的toDataURL在节点上的不同结果

我试图测试使用jsdom + canvas绘制画布的代码

      const n = document.createElement('canvas');
      document.body.appendChild(n)
      n.width = 300,n.height = 300;
      t.moveto(0,0);
      t.lineto(200,100);
      t.stroke();
      return n.toDataURL()

我得到了这个结果

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAABmJLR0QA/wD/AP+gvaeTAAACbklEQVR4nO3UoQ0CAQAEwfsOqaifxtE0CYaKMHgcsMlMcv7Ubtvjveu2YwB/7rLtvu257TbhAgKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC0g5tl23Pd47/fYOwGfHtvOvTwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABf8wIQ7tzONLySTAAAAABJRU5ErkJggg==

我在chrome和firefox上进行了测试

chrome

data:image/png;base64,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

Firefox

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAACVklEQVR4nO3UMQ2AAAADwSpAHZrRxcKAAsgnd0n3Tr9t17NzAAHnhAuIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4g5x0ugITj7wMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAZ24qWtu3/lkDYQAAAABJRU5ErkJggg==

尽管3个base64代码显示相同的图像,但我想使用chrome或firefox获得相同的结果。 我不知道为什么jsdom + canvas返回这样的结果。 仅供参考,firefox的结果更相似。 如何在jsdom + canvas中使用chrome或firefox获得完全相同的结果?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。