Question

所以我正在使用JS库来生成QR码。 JS库通过将QR代码呈现到画布来生成QR代码。

但是，我想在此QR码后面添加背景，因此我尝试在绘制背景后通过调用QR码库将它们合并在一起。但这不起作用，QR码替换了背景。

有人可以帮我吗？这是调用QR码库的代码：


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

非常感谢！

Answer 1

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

您只需要确保

Qr代码库完成了到临时画布的绘制
您想要的背景图像已加载

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

这是一个例子：

var tempCanvas = document.createElement("canvas");
var realCanvas = document.getElementById("realCanvas");
var context = realCanvas.getContext("2d");
QrCodeWithLogo.toCanvas({
  canvas: tempCanvas,
  content: 'https://www.google.com',
  width: 256,
  logo: {
    src: 'https://picsum.photos/id/76/100/100',
    borderRadius: 10,
    borderSize: 0
  }
}).then(function() {
  var image = new Image();
  image.onload = function() {
    context.drawImage(this, 0, 0, 400, 400);
    context.drawImage(tempCanvas, realCanvas.width / 2 - tempCanvas.width / 2, realCanvas.height / 2 - tempCanvas.height / 2)
  }
  image.src = "https://picsum.photos/id/79/400/400";
})

<script src="https://unpkg.com/qr-code-with-logo@1.1.0/lib/qr-code-with-logo.browser.min.js"></script>
<canvas id="realCanvas" width="400" height="400"></canvas>

合并两个画布

1 个答案: