微信小程序探险记 - 生成图片分享

2019/7/11 22:53:13 人评论 次浏览 分类:开发资料

前言

最近几天作者一直在忙着开发一个C端微信小程序商城项目(wepy 1.7.x, 不得不吐槽坑超级多,被虐的不要不要的,下个版本打算 taro + ts 重构, 差点被逼疯了..)

今天就有个生成图片分享的需求,需要实现。具体探险经历如下

业务需求

如图所示,在点击保存的时候,生成上方的图片并保存。

具体实现

需要保存的区域要用canvas绘制,之后使用wx.canvasToTempFilePath 生成本地图片 以及 wx.saveImageToPhotosAlbum 保存图片

1. 创建 canvas 画布

<canvas
  class="home-share__canvas" // 内部添加样式,主要是宽高
  canvas-id="shareCanvas"
/>
复制代码

2. 绘制画布

const ctx = wx.createCanvasContext('shareCanvas')
// banner图
ctx.drawImage('../../../assets/share/banner.png', 0, 0, 240, 40)
ctx.drawImage('../../../assets/share/title.png', 82, 9.5, 76, 21)

// 画矩形
ctx.setFillStyle('white')
ctx.fillRect(0, 40, 240, 240)

ctx.setFillStyle('white')
ctx.fillRect(0, 280, 240, 100)

// 价格文字
ctx.setFillStyle('#ff0136') // 文字颜色:黑色
ctx.setFontSize(30) // 文字字号:22px

ctx.font = 'bold 30px DIN Alternate' // 字体可以这样设置样式
ctx.fillText('996', 20, 300)

......

ctx.stroke()
ctx.draw()
复制代码

3. 生成图片

wx.canvasToTempFilePath({
  canvasId: 'shareCanvas',
  success: function(res) {
    console.log(res.tempFilePath) // 生成的图片地址
  }
})
复制代码

4. 保存图片

saveImageToPhotosAlbum(imgUrl) { // imgUrl 即是上方的 res.tempFilePath
    if (imgUrl) {
        wx.saveImageToPhotosAlbum({
            filePath: imgUrl,
            success: res => {
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
              })
            },
            fail: err => {
              wx.showToast({
                title: '保存失败',
                icon: 'none',
                duration: 2000
              })
            }
        })
    } else {
      wx.showToast({
        title: '绘制中……',
        icon: 'loading',
        duration: 3000
      })
    }
}
复制代码

ps: 需要授权 writePhotosAlbum, 中间需要加入授权的逻辑

So Easy

别人写了一半的项目, 持续踩坑中...

赞赏

相关教程

  • 微信小程序卡券开发(亲测)

    提示:小程序卡券和公众平台调用基本一致,请先查看公众平台卡券文档一、公众帐号/小程序绑定由于微信卡券用的是一套逻辑。所以小程序需要先和公众账号绑定,才能在小程序中调起公众平台卡券登录微信公众平台:https://open.weixin.qq.com/ 进行绑定操作二、公众号卡券添加小……

    2017/6/3 18:45:01

共有访客发表了评论 网友评论

验证码: 看不清楚?