H5生成二维码海报

生成带参数的地址二维码并画到海报上

在开发过程中，我们可能需要生成带参数的地址二维码，并将其画到海报上。这样的需求在很多场景中都很常见，比如用户扫描二维码后跳转到指定页面。下面，我们将介绍如何使用第三方控件来绘制二维码，并将它画到指定的海报背景上。

在使用 qrcodejs2 之前，你需要先安装该第三方控件。你可以通过以下命令使用 npm 来安装 qrcodejs2：

npm install qrcodejs2

第一步：绘制二维码

为了生成二维码，我们将使用一个名为 qrcodejs2 的第三方控件。首先，我们需要在页面中添加一个 canvas 元素和一个隐藏的 div 元素。然后，我们可以通过导入 QRCode 类来创建一个二维码实例，并设置相关参数。

<canvas id="canvas" width="530" height="760" v-show="false">
   浏览器版本太低，请更新浏览器
</canvas>
<img v-show="posterLoad" id="newimage" src="" style="width: 256px;height: 380px;">
<div id="qrcode" style="display:none"></div>

import QRCode from 'qrcodejs2'

const rate = window.devicePixelRatio
let qrcode = new QRCode('qrcode', {
    width: 150,
    height: 150,
    text: 'https://www.baidu.com?id=111',
    colorDark: '#000',
    colorLight: '#fff',
    correctLevel: QRCode.CorrectLevel.H
})

在生成二维码后，qrcode 元素中会添加一个 canvas 和一个 img 元素。我们可以通过获取这些元素的内容来绘制二维码。

第二步：将二维码画到背景上

接下来，我们需要将生成的二维码画到海报背景上。首先，我们需要获取海报背景图片的 URL，并创建一个 Image 对象加载该图片。如果图片来自网络，则需要设置 crossOrigin 属性为 'anonymous'，并确保服务器允许跨域请求。

var imageBox = document.getElementById('newimage')
var canvas = document.getElementById('canvas')
canvas.width = 265 * rate
canvas.height = 380 * rate
var ctx = canvas.getContext('2d')
var img = new Image()
img.setAttribute('crossOrigin', 'anonymous')
img.src = 'https://example.com/poster.png'

img.onload = () => {
    // 绘制海报背景图
    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 265 * rate, 380 * rate)

    // 绘制二维码图像
    let qrCodeImg = document.getElementById('qrcode').children[0]
    ctx.drawImage(qrCodeImg, 0, 0, qrCodeImg.width, qrCodeImg.height, 192 * rate, 284 * rate, 60 * rate, 60 * rate)
  
    // 将画布转换为图片并显示
    imageBox.src = canvas.toDataURL('image/png')
}

以下是完整代码

<template>
  <div>
    <canvas id="canvas" width="530" height="760" v-show="false">
      浏览器版本太低，请更新浏览器
    </canvas>
    <img v-show="posterLoad" id="newimage" src="" style="width: 256px;height: 380px;">
    <div id="qrcode" style="display:none"></div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'

export default {
  mounted() {
    const rate = window.devicePixelRatio
    let qrcode = new QRCode('qrcode', {
      width: 150,
      height: 150,
      text: 'https://www.baidu.com?id=111',
      colorDark: '#000',
      colorLight: '#fff',
      correctLevel: QRCode.CorrectLevel.H
    })

    var imageBox = document.getElementById('newimage')
    var canvas = document.getElementById('canvas')
    canvas.width = 265 * rate
    canvas.height = 380 * rate
    var ctx = canvas.getContext('2d')
    var img = new Image()
    img.setAttribute('crossOrigin', 'anonymous')
    img.src = 'https://example.com/poster.png'

    img.onload = () => {
      // 绘制海报背景图
      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 265 * rate, 380 * rate)

      // 绘制二维码图像
      let qrCodeImg = document.getElementById('qrcode').children[0]
      ctx.drawImage(qrCodeImg, 0, 0, qrCodeImg.width, qrCodeImg.height, 192 * rate, 284 * rate, 60 * rate, 60 * rate)

      // 将画布转换为图片并显示
      imageBox.src = canvas.toDataURL('image/png')
    }
  }
}
</script>