微信小程序·canvas生成二维码图

微信小程序·canvas生成二维码图

注意:微信开发者工具显示不兼容,需要真机看效果

html】

<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas>

js】

// 将 全部js文件导入拷贝到项目路所需的目录下,
// 将 weapp.qrcode.esm.js 导入到js页面中
import drawQrcode from '../../utils/weapp.qrcode.esm.js'
getQrcode() { //生成二维码
    const query = wx.createSelectorQuery()

    query.select('#myQrcode')
      .fields({
        node: true,
        size: true
      })
      .exec(async (res) => {
        var canvas = res[0].node
        var thiss = this;
        var img = canvas.createImage();
        img.src = "../../logo.jpg" //logo图片地址

        img.onload = function () {
          // img.onload完成后才能调用 drawQrcode方法
          var options = {
            canvas: canvas,
            canvasId: 'myQrcode',
            width: 260,
            padding: 30,
            paddingColor: '#fff',
            background: '#fff',
            foreground: '#000000',
            text: '123456789', //二维码内容
            image: {
              imageResource: img,
              width: 50, // 建议不要设置过大,以免影响扫码
              height: 50, // 建议不要设置过大,以免影响扫码
              round: true // Logo图片是否为圆形
            }
          }

          drawQrcode(options)

          // 获取临时路径
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 260,
            height: 260,
            destWidth: 600,
            destHeight: 600,
            canvasId: 'myQrcode',
            canvas: canvas,
            success(res) {
              console.log('二维码临时路径为:', res.tempFilePath)
            },
            fail(res) {
              console.error(res)
            }
          })

        };
      })
  },

options

Type: Object

参数必须说明示例
canvas必须画布标识,传入 canvas 组件实例
canvasId绘制的canvasId'myQrcode'
text必须二维码内容‘123456789’
width二维码宽度,与canvaswidth保持一致260
padding空白内边距20
paddingColor内边距颜色默认与background一致
background二维码背景颜色,默认值白色'#ffffff'
foreground二维码前景色,默认值黑色'#000000'
typeNumber二维码的计算模式,默认值-18
correctLevel二维码纠错级别,默认值为高级,取值:{ L: 1, M: 0, Q: 3, H: 2 }1
image在 canvas 上绘制图片,层级高于二维码,v1.1.1+版本支持。{imageResource: '', width:80, height: 80, round: true}
1,683 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注