mini-json2canvas v1.3.0

mini-json2canvas 介绍

mini-json2canvas 适用于微信小程序通过配置 json 数据来生成 canvas。

海报样例

使用方式

1、demo.wxml 中添加 canvas 标签

  <canvas id="canvasDemo" type="2d" style="width:{{width}}px;height:{{height}}px"></canvas>

2、引入 MiniJson2Canvas

import MiniJson2Canvas from 'mini-json2canvas';

3、构造 json 数据

const {
      windowWidth,
      windowHeight,
      pixelRatio
    } = wx.getSystemInfoSync();
    this.setData({
      width: windowWidth,
      height: windowHeight
    }, () => {
      const query = wx.createSelectorQuery();
      query.select("#canvasDemo").fields({
        node: true,
        size: true
      }).exec((res) => {
        const mini = new MiniJson2Canvas({
          canvas: res[0].node,
          width: windowWidth,
          height: windowHeight,
          pixelRatio: pixelRatio
        });
        const ratio = windowWidth / 375; //相对于设计稿的比例值
        const json = {
          name: '测试Demo',
          elements: [{
            type: 'Image',
            image: 'https://cdn.pixabay.com/photo/2016/06/13/09/40/carpenter-1453880_960_720.png',
            description: '背景图片',
            width: windowWidth,
            height: windowHeight * 0.8,
            x: 0,
            y: 0
          }, {
            type: 'Rect',
            description: '底部内容容器',
            width: windowWidth,
            height: windowHeight * 0.2,
            x: 0,
            y: windowHeight * 0.8,
            color: '#fff',
            children: [{
              type: 'Text',
              description: '文字',
              text: '搬砖者',
              x: 24 * ratio,
              y: windowHeight * 0.8 + 17 * ratio,
              color: '#006EE4',
              fontSize: 18 * ratio,
              fontWeight: 'bold',
              maxWidth: 72 * ratio,
              lineHeight: 25 * ratio
            }, {
              type: 'Text',
              description: '文字',
              text: '·哪里需要哪里搬',
              x: 96 * ratio,
              y: windowHeight * 0.8 + 17 * ratio,
              color: '#000',
              fontSize: 18 * ratio,
              fontWeight: 'bold',
              lineHeight: 25 * ratio
            }, {
              type: 'Text',
              description: '云工作室文字',
              text: '识别二维码  看我搬砖',
              x: 24 * ratio,
              y: windowHeight * 0.8 + 17 * ratio + 29 * ratio,
              color: '#666',
              fontSize: 12 * ratio,
              lineHeight: 17 * ratio
            }, {
              type: 'Rect',
              description: '个人信息容器',
              width: 210 * ratio,
              height: 42 * ratio,
              x: 24 * ratio,
              y: windowHeight * 0.8 + 17 * ratio + 29 * ratio + 20 * ratio,
              color: '#fff',
              radius: 4,
              shadowColor: 'rgba(0,0,0,0.3)',
              shadowOffsetX: 0,
              shadowOffsetY: 2,
              shadowBlur: 6,
              children: [{
                  type: 'Image',
                  image: 'https://himg.bdimg.com/sys/portraitn/item/9f4ab4fdd8afbba8d0bbbba8bfaa002c',
                  description: '个人信息头像',
                  width: 30 * ratio,
                  height: 30 * ratio,
                  borderRadius: 15 * ratio,
                  x: 24 * ratio + 9 * ratio,
                  y: windowHeight * 0.8 + 17 * ratio + 29 * ratio + 26 * ratio,
                  borderColor: '#ededed',
                  borderWidth: 1,
                },
                {
                  type: 'Text',
                  description: '个人名称',
                  text: '搬砖A',
                  x: 24 * ratio + 9 * ratio + 40 * ratio,
                  y: windowHeight * 0.8 + 17 * ratio + 29 * ratio + 27 * ratio,
                  color: '#333333',
                  fontSize: 12 * ratio,
                  lineHeight: 14 * ratio,
                  fontWeight: 'bold'
                },
                {
                  type: 'Text',
                  description: '搬砖公司名称',
                  text: '天安门砖块移动公司',
                  x: 24 * ratio + 9 * ratio + 40 * ratio,
                  y: windowHeight * 0.8 + 17 * ratio + 29 * ratio + 44 * ratio,
                  color: '#666666',
                  fontSize: 10 * ratio,
                  lineHeight: 10 * ratio,
                  maxWidth: 210 * ratio - 58 * ratio
                }
              ]
            }, {
              type: 'Image',
              image: 'https://mmbiz.qpic.cn/mmbiz_jpg/cVgP5bCElFhNSicyHulVLuDYQFPZLsIAx9DEg1jNJQ36ATINgqMDpicO1HNAwffYIMC8RkOXXk02uw3H5JY9bbGQ/0?wx_fmt=jpeg',
              description: '二维码图片',
              width: 72 * ratio,
              height: 72 * ratio,
              x: 24 * ratio + 18 * 14 * ratio + 10 * ratio,
              y: windowHeight * 0.8 + 17 * ratio,
            }, {
              type: 'Text',
              description: '二维码',
              text: '搬砖A的二维码',
              x: 24 * ratio + 18 * 14 * ratio + 10 * ratio,
              maxWidth: 72 * ratio,
              textAlign: 'center',
              y: windowHeight * 0.8 + 17 * ratio + 76 * ratio,
              color: '#666',
              fontSize: 10 * ratio
            }]
          }]
        }
        mini.json2canvas(json).then(canvas => {
          // canvas转图片地址
           wx.canvasToTempFilePath({
             x: 0,
             y: 0,
             width: canvas.width,
             height: canvas.height,
             destWidth: canvas.width * 3,
             destHeight: canvas.height * 3,
             canvas: canvas,
             quality: 1,
             success: (res) => {
               // 保存图片到相册
               wx.saveImageToPhotosAlbum({
                 filePath: res.tempFilePath,
               })
             }
           })
        }).catch(err => {
          console.log(err)
        });
      })
    })