1

I used jquery.qrcode.js to generate a qrcode image with logo . There has a logo on generated <canvas> , but when I used toDataURL to render to <img /> , logo was disappeared . How can I correct to render a qrcode image with logo to <img /> ? This is my code .

$('#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'))
Albert Einstein
  • 7,472
  • 8
  • 36
  • 71
sky fish
  • 13
  • 1
  • 4
  • 1
    If any answer has solved your question please consider [accepting it](https://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – skitty jelly Jun 14 '18 at 09:03

1 Answers1

2

Your logo does not appear because you export the data URL before the final canvas is created. Adding a logo to the QR code is an async process. Setting src of the image after the final canvas is created should fix the problem.

For example, using setTimeout (though it is not a good practice and I don't know if this library provides you with some callbacks).

However, since the logo is from the internet and not your domain, you may face a Tainted canvases may not be exported problem.

You can also read this. Tainted canvases may not be exported

wdetac
  • 2,712
  • 3
  • 20
  • 42