合并两个画布

Question

so I am using a JS library to generate a QR Code. The JS library generates the QR code by rendering it to a canvas.

However I would like to have a background behind this QR Code, and I tried merging them together by calling the QR code library after the background has been drawn. Yet this doesnt work, and the QR code replaces the background.

Can someone help me out pls? Here's the code to call the QR code library:

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

Thanks so much!

Answer 1

This can be done by using two canvases. The first being your main canvas where the final composed image should be drawn onto and a temporary canvas which is used to generate the qr code.

You just have to make sure that

• the Qr code library finished drawing to the temporary canvas
• the image you want to have in the background is loaded

Afterwards you can compose the final image by using the canvas's .drawImage() method.

Here's an example:

 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>