评论

如何实现快速生成朋友圈海报分享图

如何快速生成一张分享图~

由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片,然后引导用户下载图片到本地后再分享到朋友圈。相信大家在绘制分享图中应该踩到 Canvas 的各种(坑)彩dan了吧~

这里首先推荐一个开源的组件:painter(通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能)

咱们不多说,直接上手就是干。

首先我们新增一个自定义组件,在该组件的json中引入painter

{
  "component": true,
  "usingComponents": {
    "painter": "/painter/painter"
  }
}

然后组件的WXML (代码片段在最后)

class="share-wrap" wx:if="{{visible}}" catchtouchmove="preventDefault">
  <view class="share-back">view>
  <view class="share-container">
    <view class="close" bindtap="handleClose">view>
    <image mode="widthFix" src="{{sharePath}}" class="share-image" />
    <view class="share-tips">保存图片,叫伙伴们来参与吧view>
    <view class="save-btn" bindtap="handlePhotoSaved">view>
  view>
view>
<painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" />

接着组件的WXSS (代码片段在最后)

.share-wrap {
  width: 100%;
}

.share-back {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 888;
}

.share-container {
  width: 100%;
  background: #FFF;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.close {
  width: 30rpx;
  height: 30rpx;
  overflow: hidden;
  position: absolute;
  right: 64rpx;
  top: 64rpx;
}

.close::after {
  transform: rotate(-45deg);
}

.close::before {
  transform: rotate(45deg);
}

.close::before,
.close::after {
  content: '';
  position: absolute;
  height: 3rpx;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -2rpx;
  background: #9C9C9C;
}

.share-image {
  width: 420rpx;
  margin: 66rpx auto 0;
  display: block;
  border-radius: 16rpx;
  box-shadow: 0px 4rpx 8px 0px rgba(0, 0, 0, 0.1);
}

.share-tips {
  width: 100%;
  text-align: center;
  color: #3C3C3C;
  font-size: 28rpx;
  margin: 32rpx 0;
}

.save-btn {
  width: 336rpx;
  height: 96rpx;
  margin: 0 auto 94rpx;
  background: url('https://qiniu-image.qtshe.com/20190506save-btn.png') center center;
  background-size: 100% 100%;
}

重点来了 JS (代码片段在最后)

Component({
  properties: {
    //属性值可以在组件使用时指定
    isCanDraw: {
      type: Boolean,
      value: false,
      observer(newVal, oldVal) {
        newVal && this.drawPic()
      }
    }
  },
  data: {
    imgDraw: {}, //绘制图片的大对象
    sharePath: '', //生成的分享图
    visible: false
  },
  methods: {
    handlePhotoSaved() {
      this.savePhoto(this.data.sharePath)
    },
    handleClose() {
      this.setData({
        visible: false
      })
    },
    drawPic() {
      if (this.data.sharePath) { //如果已经绘制过了本地保存有图片不需要重新绘制
        this.setData({
          visible: true
        })
        this.triggerEvent('initData') 
        return
      }
      wx.showLoading({
        title: '生成中'
      })
      this.setData({
        imgDraw: {
          width: '750rpx',
          height: '1334rpx',
          background: 'https://qiniu-image.qtshe.com/20190506share-bg.png',
          views: [
            {
              type: 'image',
              url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg',
              css: {
                top: '32rpx',
                left: '30rpx',
                right: '32rpx',
                width: '688rpx',
                height: '420rpx',
                borderRadius: '16rpx'
              },
            },
            {
              type: 'image',
              url: wx.getStorageSync('avatarUrl') || 'https://qiniu-image.qtshe.com/default-avatar20170707.png',
              css: {
                top: '404rpx',
                left: '328rpx',
                width: '96rpx',
                height: '96rpx',
                borderWidth: '6rpx',
                borderColor: '#FFF',
                borderRadius: '96rpx'
              }
            },
            {
              type: 'text',
              text: wx.getStorageSync('nickName') || '青团子',
              css: {
                top: '532rpx',
                fontSize: '28rpx',
                left: '375rpx',
                align: 'center',
                color: '#3c3c3c'
              }
            },
            {
              type: 'text',
              text: `邀请您参与助力活动`,
              css: {
                top: '576rpx',
                left: '375rpx',
                align: 'center',
                fontSize: '28rpx',
                color: '#3c3c3c'
              }
            },
            {
              type: 'text',
              text: `宇宙最萌蓝牙耳机测评员`,
              css: {
                top: '644rpx',
                left: '375rpx',
                align: 'center',
                fontWeight: 'bold',
                fontSize: '44rpx',
                color: '#3c3c3c'
              }
            },
            {
              type: 'image',
              url: 'https://qiniu-image.qtshe.com/20190605index.jpg',
              css: {
                top: '834rpx',
                left: '470rpx',
                width: '200rpx',
                height: '200rpx'
              }
            }
          ]
        }
      })
    },
    onImgErr(e) {
      wx.hideLoading()
      wx.showToast({
        title: '生成分享图失败,请刷新页面重试'
      })
    },
    onImgOK(e) {
      wx.hideLoading()
      this.setData({
        sharePath: e.detail.path,
        visible: true,
      })
      //通知外部绘制完成,重置isCanDraw为false
      this.triggerEvent('initData') 
    },
    preventDefault() { },
    // 保存图片
    savePhoto(path) {
      wx.showLoading({
        title: '正在保存...',
        mask: true
      })
      wx.saveImageToPhotosAlbum({
        filePath: path,
        success: (res) => {
          wx.showToast({
            title: '保存成功',
            icon: 'none'
          })
          setTimeout(() => {
            this.setData({
              visible: false
            })
          }, 300)
        },
        fail: (res) => {
          wx.getSetting({
            success: res => {
              let authSetting = res.authSetting
              if (!authSetting['scope.writePhotosAlbum']) {
                wx.showModal({
                title: '提示',
                content: '您未开启保存图片到相册的权限,请点击确定去开启权限!',
                success(res) {
                  if (res.confirm) {
                    wx.openSetting()
                  }
                }
              })
              }
            }
          })
          setTimeout(() => {
            wx.hideLoading()
            this.setData({
              visible: false
            })
          }, 300)
        }
      })
    }
  }
})

如此一个绘制分享图的自定义组件就完成啦。

效果图如下:

tips:

  • 暂不支持绘制图片 圆角为:10rpx 0rpx 0rpx 0rpx 类似的。
  • 文字居中实现可以看下我代码片段
  • 文字换行实现(maxLines)只需要设置宽度,maxLines如果设置为1,那么一行超出将会展示为省略号
    当然如果想支持四个圆角的 试试 把Pen.js文件78行的_doClip方法重写,代码:
_doClip(borderRadius, width, height) {
    if (borderRadius && width && height) {
      let border = borderRadius.split(' ')
      let r1 = 0
      let r2 = 0
      let r3 = 0
      let r4 = 0
      if (border.length==1){
        r1 = r2 = r3 = r4 = Math.min(border[0].toPx(), width / 2, height / 2);
      }else{
        r1 = Math.min(border[0] == 0 ? 0 : border[0].toPx(), width / 2, height / 2);
        r2 = Math.min(border[1] == 0 ? 0 : border[1].toPx(), width / 2, height / 2);
        r3 = Math.min(border[2] == 0 ? 0 : border[2].toPx(), width / 2, height / 2);
        r4 = Math.min(border[3] == 0 ? 0 : border[3].toPx(), width / 2, height / 2);
      }
      //const r = Math.min(borderRadius.toPx(), width / 2, height / 2);
      // 防止在某些机型上周边有黑框现象,此处如果直接设置 setFillStyle 为透明,在 Android 机型上会导致被裁减的图片也变为透明, iOS 和 IDE 上不会
      // setGlobalAlpha 在 1.9.90 起支持,低版本下无效,但把 setFillStyle 设为了 white,相对默认的 black 要好点
      this.ctx.setGlobalAlpha(0);
      this.ctx.setFillStyle('white');
      this.ctx.beginPath();
      this.ctx.arc(-width / 2 + r1, -height / 2 + r1, r1, 1 * Math.PI, 1.5 * Math.PI);
      this.ctx.lineTo(width / 2 - r2, -height / 2);
      this.ctx.arc(width / 2 - r2, -height / 2 + r2, r2, 1.5 * Math.PI, 2 * Math.PI);
      this.ctx.lineTo(width / 2, height / 2 - r3);
      this.ctx.arc(width / 2 - r3, height / 2 - r3, r3, 0, 0.5 * Math.PI);
      this.ctx.lineTo(-width / 2 + r4, height / 2);
      this.ctx.arc(-width / 2 + r4, height / 2 - r4, r4, 0.5 * Math.PI, 1 * Math.PI);
      this.ctx.closePath();
      this.ctx.fill();
      // 在 ios 的 6.6.6 版本上 clip 有 bug,禁掉此类型上的 clip,也就意味着,在此版本微信的 ios 设备下无法使用 border 属性
      if (!(getApp().systemInfo &&
          getApp().systemInfo.version <= '6.6.6' &&
          getApp().systemInfo.platform === 'ios')) {
        this.ctx.clip();
      }
      this.ctx.setGlobalAlpha(1);
    }
  }

主要是把borderRadius属性Split为多个变量,然后一个一个判断有没有值。
使用方法(要么只给一个值,要么四个值都给):

borderRadius: ‘16rpx’
borderRadius: ‘16rpx 0 0 16rpx’

gitHub地址:https://github.com/Kujiale-Mobile/Painter

代码片段:https://developers.weixin.qq.com/s/jiEZu4m17z9b

附上painter可视化编辑代码工具:点我直达

因为涉及网络图片,代码片段设置不了downloadFile合法域名,建议真机开启调试模式,开发者工具 详情里开启不校验合法域名进行代码片段的运行查看。

最后看下面大家评论问的较多的问题,再多一句嘴:

downLoadFile合法域名在小程序后台 开发》开发设置里配置,域名为你图片的域名前缀 比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。

最后一次编辑于  06-24  
点赞 53
收藏
评论

46 个评论

  • do-do
    do-do
    03-09

    楼主,您好!如下代码所示,将url设置为,https类型的网络图片可以正常加载,将url换成云开发中存储的图片会出错,

    报错如下:

    VM651:1 Failed to load local image resource /component/components/painter/cloud://xxxxXX/vision-test-image1583682357195.jpg 

     the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) 

    问下您是不是只能使用网络图片和本地图片,不可以使用云开发中存储的图片?

    谢谢楼主。

    {

                  type: 'image',
                  url: wx.getStorageSync('imageUrl') || 'https://qiniu-image.qtshe.com/default-avatar20170707.png',
                  css: {
                    top: '32rpx',
                    left: '30rpx',
                    right: '32rpx',
                    width: '688rpx',
                    height: '420rpx',
                    borderRadius: '16rpx'
                  },
                },
    
    03-09
    赞同
    回复 11
    • 胖丫么胖
      胖丫么胖
      03-10
      可以使用。
      03-10
      回复
    • do-do
      do-do
      03-10回复胖丫么胖
      您好!那我这边为啥会报如上错误?
      03-10
      回复
    • 胖丫么胖
      胖丫么胖
      03-10
      500是网络错误,你这边这个图片地址能展示到页面上么?我记得cloud的地址不是这样的,没搞过云开发不太清楚。。。。
      03-10
      回复
    • do-do
      do-do
      03-10回复胖丫么胖
      图片本身在我小程序内可以正常展示的,但是用这个组件就会报错, 图片存储小程序自带的云存储中。
      03-10
      回复
    • do-do
      do-do
      03-11回复胖丫么胖
      这是云存储的 FileID:
      cloud://cloud-environment-name.6875-cloud-environment-name-1301043156/vision-test-image1578227244217.jpg   


      url:字段也是填的这个,但是会报错,是不是 没有权限获取该图片?
      03-11
      回复
    查看更多(6)
  • 甲乙。
    甲乙。
    02-28

    您好我想请教一下是否可以设置卡片生成文字两行显示且超出隐藏呢?

    02-28
    赞同
    回复 14
    • 胖丫么胖
      胖丫么胖
      02-28
      这个功能建议自己做文字截取,目前我们可以做到文字超出省略号
      02-28
      回复
    • 甲乙。
      甲乙。
      02-28回复胖丫么胖
      是否设置maxLines就可以?但是我设置为1或者设置宽度都不可以都没有效果呢?
      02-28
      回复
    • 胖丫么胖
      胖丫么胖
      02-28回复甲乙。
      设置宽度 并且设置maxLines为1说明超出这个宽度会省略号
      02-28
      回复
    • 甲乙。
      甲乙。
      02-28回复胖丫么胖
      刚好用上了,谢谢大佬的分享!
      02-28
      回复
    • 胖丫么胖
      胖丫么胖
      02-28回复甲乙。
      👌
      02-28
      回复
    查看更多(9)
  • 何健飞
    何健飞
    02-22

    膜拜!

    02-22
    赞同
    回复
  • 倾紫
    倾紫
    02-14

    想问下为什么views里面的东西,ios上没生成

    02-14
    赞同
    回复 1
    • 胖丫么胖
      胖丫么胖
      02-15
      写个代码片段??什么问题
      02-15
      回复
  • Qiu (吉²)
    Qiu (吉²)
    02-12

    请问这个data-ptpid是什么啊?起到什么作用?

    02-12
    赞同
    回复 1
    • 胖丫么胖
      胖丫么胖
      02-12
      这是我的业务代码。没用的。你删掉即可。这是我们做自定义埋点的。
      02-12
      回复
  • y
    y
    01-13

    请问一下palette文件里的模板怎么获取值。。。

    01-13
    赞同
    回复 9
    • 胖丫么胖
      胖丫么胖
      01-13
      ???这个是设置对象传进去的,可以是任何变量
      01-13
      回复
    • y
      y
      01-13回复胖丫么胖
      直接new Card().palatte(obj)这样传吗?
      01-13
      回复
    • y
      y
      01-13
      谢谢楼主大大
      01-13
      回复
    • 胖丫么胖
      胖丫么胖
      01-13回复y
      不是,那是新版的方法。我这里是老版本的
      01-13
      回复
    • 胖丫么胖
      胖丫么胖
      01-13回复y
      你先说你想做什么操作吧
      01-13
      回复
    查看更多(4)
  • K兔
    K兔
    01-07

    上面这些代码都是放到 comcomponent里面的么?需要加载几个外部文件了 看dome加载了俩个文件夹?


    01-07
    赞同
    回复 12
    • 胖丫么胖
      胖丫么胖
      01-07
      不是啊。。
      01-07
      回复
    • K兔
      K兔
      01-07回复胖丫么胖
      我现在用Canvas生成二维码了   不会弄样式,用你这个刚试了下,没看懂数据怎么更新,demo里面这俩个文件都需要用的吧?能不能发下你那的目录结构  感觉我弄得好乱..
      01-07
      回复
    • 胖丫么胖
      胖丫么胖
      01-07
      不是很简单么?目录随便放,只要引用路径正确就行。
      01-07
      回复
    • K兔
      K兔
      01-07回复胖丫么胖
      你看着都很简单.....那数据是写到组件的js文件里面的   在商品详情页我怎么能换成商品的图片了?还是说商品详情页js里面可以重新给赋值?
      01-07
      回复
    • 胖丫么胖
      胖丫么胖
      01-07
      可以通过变量传进去啊。
      01-07
      回复
    查看更多(7)
  • 小肥羊
    小肥羊
    2019-12-31

    先收藏后面上项目中体验下。

    2019-12-31
    赞同
    回复
  • 凡夫俗子
    凡夫俗子
    2019-12-03

    网络图片 保存下来之后很模糊 求解

    2019-12-03
    赞同
    回复 3
  • 多爱一婴 熊丹丹
    多爱一婴 熊丹丹
    2019-11-26

    大神,有个问题想问,我 getImageInfo 之后绘制图片,然后在执行 setFontSize 和 fillText() 然后执行 draw(),但是文字一直不出现是什么原因?没有用您的插件,我以为是工具的问题,但是放到手机上也展示不出来

    2019-11-26
    赞同
    回复 4
    • 胖丫么胖
      胖丫么胖
      2019-11-26
      贴个代码片段吧。建议你用下插件试试,超级方便。目前还有手动拖拽的网页,拖拽完成后生成代码https://lingxiaoyi.github.io/painter-custom-poster/
      2019-11-26
      回复
    • 多爱一婴 熊丹丹
      多爱一婴 熊丹丹
      2019-11-26回复胖丫么胖
      2019-11-26
      回复
    • 多爱一婴 熊丹丹
      多爱一婴 熊丹丹
      2019-11-26回复胖丫么胖
      我知道了,是 clip()影响了,因为我对图片做了剪切
      2019-11-26
      回复
    • 胖丫么胖
      胖丫么胖
      2019-11-26回复多爱一婴 熊丹丹
      down
      2019-11-26
      回复

正在加载...

登录 后发表内容