首页 » 其他 » 小程序——生成图片并保存,分享到朋友圈

小程序——生成图片并保存,分享到朋友圈

 

生成图片分享朋友圈功能早做好了,一直没时间整理,草稿的最后编辑时间是两个月半前,今天终于有时间整理成博客了。(草稿箱里还有好几篇草稿没时间写)

小程序没有开放分享到朋友圈的接口,而朋友圈又是一个很大的流量入口,开发者都想利用好这个入口,但怎么做呢?现在只有一种办法,小程序生成一张包含要分享的信息的图片,让用户保存,然后手动发朋友圈,通常这张图片上会包含小程序码。

效果图在最底下。

操作逻辑是点击分享按钮,底部弹出选项,分享给好友还是朋友圈,选择好友弹出消息列表,选择朋友圈则生成一张图片,提示保存到手机,然后手动发到朋友圈。

生成图片要用到canvas的知识,之前不会这个,专门学了下,生成个分享用的图并不难。

点击分享到朋友圈后,首先,准备一张canvas画布(也就是一个canvas盒子),设置 canvas-id 属性,然后就能通过js来画图片了。

js脚本中,先准备本次分享要用到的文字信息,用户名,超越的用户数,书架中书的本数等,这里还用到js中的Promise,没学明白,搜了一个函数用的。

通过一些判断取得要在图片中显示的书,然后就开始画图片。

完整代码如下,过程都在注释里。

有几个注意的地方。

一是为了自适应各种手机屏幕的分辨率,这里通过计算来设置图片的宽高,而不是固定的,计算逻辑是获取到手机屏幕宽度width,除以750(小程序专用宽度,单位rpx),得出来单位rpx对应的px,变量名为rpxwidth,在需要配置宽高的地方,用rpx * rpxwidth,就能得到在打开手机上要显示的宽高,不管在什么屏幕上看,图片对应屏幕的比例是一样的。

二是生成二维码,微信接口返回的是一个二进制流,需要手动转换成图片,这个地方困扰了好久,具体实现是小程序请求自己后台的图片接口,返回一张图片,图片是后台代码处理微信返回的二进制流得到的,处理代码如下,调用doImg()方法就会返回一张图片。

效果图

原文链接:小程序——生成图片并保存,分享到朋友圈,转载请注明来源!

3