Question

我使用jquery.qrcode.js生成带徽标的qrcode图像。生成的<canvas>上有徽标，但当我使用toDataURL呈现给<img />时，徽标就消失了。如何更正将带有徽标的qrcode图像渲染到<img />？这是我的代码。

$('#qrcode').qrcode({
    render: 'canvas',
    text: QRCODE,
    width: 600,
    height: 600,
    background: "#ffffff",
    foreground: "#000000",
    src: 'https://wx.style999.com/static/user/img/favicon.ico'
})
$('#qrcode > img').attr('src', $('#qrcode > canvas')[0].toDataURL('image/png'))

Answer 1

您的徽标未显示，因为您在创建最终画布之前导出数据URL。在QR代码中添加徽标是异步过程。在创建最终画布后设置图像的src可以解决问题。

例如，使用setTimeout（虽然这不是一个好习惯，但我不知道这个库是否为您提供了一些回调）。

但是，由于徽标来自互联网而非您的域名，因此您可能会遇到Tainted canvases may not be exported问题。

您也可以阅读此内容。 Tainted canvases may not be exported

jquery.qrcode.js渲染到带有徽标的img

1 个答案: