用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2019-7-11 00:32

前言 最近几天作者一直在忙着开发一个C端微信小程序商城项目(wepy 1.7.x, 不得不吐槽坑超级多,被虐的不要不要的,下个版本打算 taro + ts 重构, 差点被逼疯了..) 今天就有个生成图片分享的需求,需要实现。具体探险 ...

前言

最近几天作者一直在忙着开发一个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

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 夏天Summer 来自: 掘金