时间戳

首页 > 解决方案 > jquery.qrcode.js 渲染到带有徽标的 img

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

问题描述

我使用 jquery.qrcode.js 生成带有 logo 的 qrcode 图像。生成的时候有个logo <canvas>，但是当我用来toDataURL渲染的时候<img />，logo就消失了。如何更正以将带有徽标的 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'))

标签： javascriptjquerycanvas

解决方案

您的徽标不会出现，因为您在创建最终画布之前导出了数据 URL。将徽标添加到 QR 码是一个异步过程。src创建最终画布后设置图像应该可以解决问题。

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

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

你也可以阅读这个。受污染的画布不得出口

推荐阅读