Javascript 将两个画布合并在一起

因此，我使用JS库生成二维码。JS库通过将二维码渲染到画布来生成二维码

然而，我想在这个二维码后面有一个背景，我尝试在背景绘制完成后通过调用二维码库将它们合并在一起。但这不起作用，二维码取代了背景

有人能帮我吗？以下是调用二维码库的代码：

      QrCodeWithLogo.toCanvas({
        canvas: temp_canvas,
        content: 'https://www.google.com',
        width: 510,
        logo: {
          src: '/assets/mylogo.png',
          borderRadius: 10,
          borderSize : 0
        }

---

非常感谢

这可以通过使用两张画布来完成。第一个是主画布，在主画布上绘制最终合成的图像，以及用于生成二维码的临时画布

你只要确保

• 二维码库已完成绘制到临时画布
• 您希望在背景中显示的图像已加载

之后，您可以使用画布的.drawImage（）方法合成最终图像

下面是一个例子：

var tempCanvas=document.createElement（“画布”）；
var realCanvas=document.getElementById（“realCanvas”）；
var context=realCanvas.getContext（“2d”）；
QrCodeWithLogo.toCanvas({
画布：临时画布，
内容:'https://www.google.com',
宽度：256，
标志：{
src:'https://picsum.photos/id/76/100/100',
边界半径：10，
边框大小：0
}
}).然后（函数（）{
var image=新图像（）；
image.onload=函数（）{
drawImage（this，0，0，400400）；
context.drawImage（tempCanvas，realCanvas.width/2-tempCanvas.width/2，realCanvas.height/2-tempCanvas.height/2）
}
image.src=”https://picsum.photos/id/79/400/400";
})