小程序canvas生成二维码图片踩的坑

1：生成临时图片，保证画布被加载以及渲染（即本身不可以 hidden 或是上级元素不可以 hidden 或是 wx:if 隐藏等）

== 》建议：因为 canvas 的组件层级（z-index）是最高的，无法通过层级改变，如自定义的弹框类似的组件总会被挡住

== 》若不想给挡住，便要控制 canvas 隐藏（hidden 、 wx:if）

但是利用 API ctx.setGlobalAlpha = 0(只是变成不透明，视觉上给隐藏，但是还是还在，若是那位置有 tap 等事件就尴尬了)

== 》因为我只是利用 canvas生成二维码图片， swiper 轮播等使用，必须要二维码图片。

+++++ 诸多使用把canvas生成的二维码生成图片原因原因

1：我自定义使用 alert 、confirm、message组件，因为canvas 组件由客户端native生成，改变不了层级，

所以总是总之隐藏好麻烦，也解决不了我使用轮播使用二维码

2：官网(CSS动画对canvas无效)

tip: canvas 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
tip: 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 canvas 组件。
tip: css 动画对 canvas 组件无效。
bug: 避免设置过大的宽高，在安卓下会有crash的问题

解决的方法：

a:把需要的 canvas 单独显示在屏幕外的十万八千里之外（position:fixed;top:-1000px;left:-1000px）

=》单独单独单独啊不要有父级元素（反正是用生成图片用）

注意了：保证 canvas 的宽高与生成二维码的宽高参数保持一致

1  <canvas canvas-id="QRCode-canvas-0" style="width:{{SIZE}}px;height:{{SIZE}}px;position: fixed;left: -500px; bottom: -500px;"></canvas>

b:利用插件（网上很多说明 jquery-qrcode.js插件）自己参考修改成 wx 的接口的；如使用 wepy框架 ES6语法

import {
    QRCode,
    QRErrorCorrectLevel
} from './qrcode';
import wepy from 'wepy';
export default class QRCodeMixin extends wepy.mixin {

    data = {
        //设置画布大小
        SIZE: 0,

    };
    async setSize(customSize = 150) {
        const res = await wepy.getSystemInfoSync();
        console.log('获取系统信息：*************** ', res)
            //不同屏幕下canvas的适配比例；设计稿是750宽
            // iphone6 => 180 px  deviceWidth 375px
        const scale = 375 / customSize;
        const width = res.windowWidth / scale;
        return parseInt(width);
    };
    async drawQRCode(ops = {}) {
        console.time('+++++++++++ 画布绘制总耗时：');
        const DEFAULT = {
            render: 'canvas', //设置渲染方式 （有两种方式 table和canvas，默认是canvas）
            typeNumber: 6, //计算模式    
            background: '#ffffff', //背景颜色   
            foreground: '#1A1A1A', //前景颜色 
            correctLevel: QRErrorCorrectLevel.H, //纠错等级  QRErrorCorrectLevel.H, =》 L 、M 、Q 、R、 H
            canvasId: 'QRCode-canvas', //canvas对象 id 
            text: 'QR-Code' //生成二维码的内容
        };
        let options = Object.assign({}, DEFAULT, {
            width: ops.size,//保持输入的宽高与canvas组件的宽高一致
            height: ops.size
        }, ops);

        if (!options.canvasId || options.canvasId == '') {
            throw new Error('请输入有效的画布 id !')
            return false;
        }
        const createCanvas = async(options) => {
            // create the qrcode itself
            const qrcode = new QRCode(options.typeNumber, options.correctLevel);
            qrcode.addData(options.text);
            qrcode.make();
            // get canvas context
            const ctx = wx.createCanvasContext(options.canvasId);
            console.log('++++++++++++++ 当前画布对象：', ctx);
            // compute tileW/tileH based on options.width/options.height
            const tileW = options.width / qrcode.getModuleCount();
            const tileH = options.height / qrcode.getModuleCount();
            //保存当前的绘图上下文
            ctx.save();
            // draw in the canvas
            for (let row = 0; row < qrcode.getModuleCount(); row++) {
                for (let col = 0; col < qrcode.getModuleCount(); col++) {
                    let style = qrcode.isDark(row, col) ? options.foreground : options.background;
                    ctx.setFillStyle(style);
                    let w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
                    let h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
                    ctx.fillRect(Math.round(col * tileW), Math.round(row * tileH), w, h);
                }
            };
            //恢复之前保存的绘图上下文。
            ctx.restore();
            ctx.draw(true, () => {           
                //一定要延时一下，总是不延时，我本人的手机生成的二维码还是图片有bug
              了
                setTimeout(() => {
                    wepy.canvasToTempFilePath({
                        canvasId: options.canvasId,
                        quality: 0.9,
                        x: 0,
                        y: 0,
                        width: options.width,
                        height: options.height,
                    }).then(res => {
                        options.callback && options.callback(res.tempFilePath);
                        console.log('++++++++++++++++  wx.canvasToTempFilePath:', res);
                    });
                }, 700);
            );
            });
        };
        createCanvas(options);
    };
};

　　生成临时图片关键的一步：

 1  ctx.draw(true, () => {
 2                 setTimeout(() => {
 3                     wepy.canvasToTempFilePath({
 4                         canvasId: options.canvasId,
 5                         quality: 0.9,
 6                         x: 0,
 7                         y: 0,
 8                         width: options.width,
 9                         height: options.height,
10                     }).then(res => {
11                         options.callback && options.callback(res.tempFilePath);
12                         console.log('++++++++++++++++  wx.canvasToTempFilePath:', res);
13 
14                     });
15                 }, 700);
16 
17             });

不懂参考官网 API 说明：https://developers.weixin.qq.com/miniprogram/dev/api/

把混合的模块加载对应的Page 上，使用

//把二维码生成图片
　　　 const self = this;
      this.drawQRCode({
        text: ticketNo,
        size, 
        callback(tempFilePath) {
          //把二维码生成图片
          self.QRCodeFilePath = tempFilePath;
          self.$apply();
        }
      });
// tempFilePath 就是上面 QRCodeMixin 封装好的生成的临时图片，再用 data 接收

生成的图片：

坑1：刚开始经常遇到 andriad 机器生成图片白色的什么内容也没有（ios就正常）（因为没有在 wx.draw 后的回调调用）

坑2：控制台打印：canvas 为空 =》就是上级或是本身给隐藏了（hidden 或是 wx:if）

坑3：生成的临时图片有时候正常有时候不正常（开发工具都正常的），真机就遇到，后来在延时一下再执行 wepy.canvasToTempFilePath

坑4：轮播图本来用一个 canvas 画图并导出图片，可是有时候有bug的，有些二维码不正常的（所以我是用了三个 canvas 组件，递归执行完，很完美的图片出来，虽然用了三个看起来臃肿，本来使用 swier 触发再对应渲染的内容后再生成图片的）

 <canvas canvas-id="QRCode-canvas-0" style="width:{{SIZE}}px;height:{{SIZE}}px;position: fixed;left: -500px; bottom: -500px;"></canvas>
 <canvas canvas-id="QRCode-canvas-1" style="width:{{SIZE}}px;height:{{SIZE}}px;position: fixed;left: -50px; bottom: -1000px;"></canvas>
 <canvas canvas-id="QRCode-canvas-2" style="width:{{SIZE}}px;height:{{SIZE}}px;position: fixed;left: -50px; bottom: -1500px;"></canvas>

生成图片

   async draw(indexValidTicketList) {
      const self = this;
      //把二维码生成图片
      self.drawQRCode({
        canvasId: 'QRCode-canvas-' + self.DRAW_QRCODE_INDEX,
        text: indexValidTicketList[self.DRAW_QRCODE_INDEX].ticketNo,
        size: self.SIZE,
        callback(tempFilePath) {
          //把二维码生成图片
          indexValidTicketList[self.DRAW_QRCODE_INDEX]['QRCodeFilePath'] = tempFilePath;
          self.$apply();
          //
          self.DRAW_QRCODE_INDEX++;
          //最多显示三张
          if (self.DRAW_QRCODE_INDEX < indexValidTicketList.length) {
            self.draw(indexValidTicketList);
          } else {
            self.DRAW_QRCODE_INDEX = 0;
            self.$apply();
          }
        }
      });
    };

能成功生成一张图片，至于多张图片你们自己觉得合理的方法去实现，这次用 canvas 的坑，你看到这里，这些坑你也在踩，刚好我踩过了，给你们参考，希望对你们有帮助！

小程序canvas生成二维码图片踩的坑

猜你喜欢