рендеринг jquery.qrcode.js в img с логотипом

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.

Вы также можете прочитать это. Загрязненные полотна не могут быть экспортированы