miniapp-canvas

miniapp-canvas

github

基于json，生成分享朋友圈图片

支持绘制类型

install

npm i --save miniapp-canvas # yarn add miniapp-canvas

示例

更多示例参考examples

// SharePYQ.ts
import MC, { createElement } from 'miniapp-canvas';

export function createSharePYQ(url, avatar) {
  const img = createElement({
    type: 'image',
    width: 100,
    height: 100,
    image: 'https://avatars1.githubusercontent.com/u/4362412?s=100&v=4'
  });

  const qrcode = createElement({
    type: 'qrcode',
    top: 100,
    left: 20,
    width: 200,
    height: 200,
    content: 'https://github.com/landn172'
  });

  const mc = new MC('canvas-id');

  // 加载元素
  mc.loadElements([img, qrcode]);
  // 绘制元素
  mc.draw();
  // 保存canvas截图
  return mc.saveImage().then(tempFilePath => {
    // tempFilePath use wx.canvasToTempFilePath
  });
}

// page.ts
import { createSharePYQ } from 'sharePYQ.ts';

Page({
  onTapShare() {
    createSharePYQ(
      'https://github.com/landn172',
      'https://avatars1.githubusercontent.com/u/4362412?s=100&v=4'
    ).then(tempFilePath => {
      console.log(tempFilePath);
    });
  }
});

// page.wxml
<view class="container">
  <canvas canvas-id="canvas-id" style="width:200px;height:200px;" disable-scroll="true"></canvas>
</view>

参数

实例化参数

<canvas canvas-id='canvas-id' id="canvas-id"></canvas>

import MC from 'miniapp-canvas';
const mc = new MC('canvas-id', 'px');
参数名 类型 默认值 描述
canvasId string default canvas-id
unit string px 单位

方法

  • loadConfig 加载 json 配置文件
mc.loadConfig([
  {
    type: image,
    image: 'https://xxx'
  }
]);
  • loadElements 加载元素(参考示例)
  • clear 清空加载的元素
  • draw 开始绘制 canvas
  • saveImage 保存 canvas 截图