微信小程序生成海报—canvas

使用场景

• 分享小程序的，绘制分享首图
  不同商品分享的是后生成不同的图片，每个商品的信息图片不同，小程序默认分享的是页面默认截图
• 小程序分享朋友圈，生成海报
  小程序不能分享到朋友圈，但是可以通过生成图片将小程序二维码放在图片上，就可以再朋友圈识别小程序二维码进到小程序里面

了解小程序中的canvass

canvas在小程序中作为原生组件出现，也有关于canvas的一些用法

• wx.createCanvasContext： 创建 canvas 的绘图上下文 CanvasContext 对象
• wx.downloadFile：下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径，单次下载允许的最大文件为 50MB。
• wx.canvasToTempFilePath：把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
• wx.saveImageToPhotosAlbum：保存图片到系统相册。

创建一个canvas

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

//js
//画了一个白色背景

let ctx = wx.createCanvasContext('canvas', this);
    ctx.rect(0, 0, 420, 333);
    ctx.setFillStyle('white');
    ctx.fill();
    ctx.draw();
//画一张图片
wx.downloadFile({
   url: url,//图片
   success: (res) => {
   let imageFilePath = res.tempFilePath;
   ctx.drawImage(imageFilePath, 0, 0, 840, 840, 0, 0, 442, 420);
   ctx.draw(true);
    })
})

保存一个canvas图片

wx.canvasToTempFilePath({
    canvasId: 'canvas',
    quality: 1,
    success: (res) => {
         let filePath = res.tempFilePath;//获取图片地址
         this.setData({
                    imageUrl: res.tempFilePath,//图片地址保存到本地
                })
            }
        }, this)

图片保存到用户手机

wx.saveImageToPhotosAlbum({
       filePath:this.data.imageUrl,
       success() {
             alert('保存成功');
        }
})

分享使用图片

onShareAppMessage() {
            return {
                title: "商品分享",
                path: '/pages/goodsDetail/goodsDetail' ,
                imageUrl: this.data.imageUrl
            }
    }

根据以上功能的组合搭配可以实现用户分享图片使用图片，也可以生成图片保存到本地然后分享到朋友圈。