uni-app之canvas实现海报分享

用uni-app实现微信小程序海报分享功能

微信小程序基础库2.9.0以后canvas新api实现，本文实现是用2.9.0新api，简单讲一下2.9.0以下用法：
效果图：

IMG_4789.PNG

1. 2.9.0以下版本创建canvas

xml：

   
  

js：
// 在组件中使用canvas，如果是在组件中使用canvas需要在创建图形上下文是加this，在页面中使用可不加
var cxt = uni.createCanvasContext('test', this);
cxt.setFillStyle('#fd0000');
cxt.fillRect(0, 0 , 50, 50);
cxt.draw();

2. 2.9.0以上版本创建canvas，主要代码片段如下：

xml

js

获取canvas实例

// canvas实例
getCtx() {
  return new Promise((resolve, reject) => {
    const query = uni.createSelectorQuery().in(this);
    query.select('#share-poster')
     .fields({ node: true, size: true })
     .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
              
        // 设置canvas大小
        const dpr = uni.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)
              
        resolve(canvas);
     })
  });
},

canvas生成图片

// 生成图片
canvasToTempFilePath(canvas) {
  uni.canvasToTempFilePath({
    canvas: canvas,
    success: (res) => {
      this.shareImg = res.tempFilePath;
      uni.hideLoading();
    },
    fail: (res) => {
      uni.hideLoading();
      this.$emit('onHideSharePoster');
      uni.showToast({
        title: '海报生成失败',
      })
    }
  })
},

canvas加载网络图片之前，
加载网络图片需要先调用uni.getImageInfo把图片下载下来，生成一个临时地址，需在微信管理平台设置图片域名白名单，图片必须是https的。

// 返回的是微信存储的临时图片路径
 getImageInfo(src) {
  return new Promise((resolve, reject) => {
     uni.getImageInfo({
        src: src,
        success: (res) => {
          resolve(res.path);
        },
        fail: (err) => {
          uni.hideLoading();
            reject(err);
        }
     })
  })
},

canvas加载网络图片

 // canvas加载网络图片
onLoadImage(canvas, src) {
  return new Promise((resolve, reject) => {
    let img = canvas.createImage();
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      uni.hideLoading();
        reject('');
    }
    img.src = src;
  });
},

3. 基础库版本判断

// 获取当前基础库版本号
const { SDKVersion } = uni.getSystemInfoSync();
// 版本号比较
isFastShare = compareVersion(SDKVersion, '2.9.0') < 0 ? true : false

export function compareVersion(v1, v2) {
  v1 = v1.split('.')
  v2 = v2.split('.')
  const len = Math.max(v1.length, v2.length)

  while (v1.length < len) {
    v1.push('0')
  }
  while (v2.length < len) {
    v2.push('0')
  }

  for (let i = 0; i < len; i++) {
    const num1 = parseInt(v1[I])
    const num2 = parseInt(v2[I])

    if (num1 > num2) {
      return 1
    } else if (num1 < num2) {
      return -1
    }
  }

  return 0
}

4. 详细代码如下：