合並兩個畫布

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代碼的臨時畫布。

您只需要確保

• 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>