前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >开发 | 小程序「分享图」生成难?一招教你轻松解决

开发 | 小程序「分享图」生成难?一招教你轻松解决

作者头像
知晓君
发布2018-07-30 14:59:27
8240
发布2018-07-30 14:59:27
举报
文章被收录于专栏:知晓程序
作者:charliesong

知晓程序注:

许多小程序,都提供了「分享图」功能。利用它,用户可以生成特制的分享图片,并分享到朋友圈。

但许多开发者,会遇到「如何处理分享图」的难题:

  • 在服务器端处理,容易遇到服务器资源不足的问题。
  • 利用小程序 Canvas 组件,容易遇到 bug。

如果你也有同样烦恼,那么知晓程序(微信号 zxcx0101)今天分享「制作器」开发者 charliesong 的这篇文章,也许会为你提供一个不一样的思路。

关注「知晓程序」微信公众号,回复「开发」,获取小程序开发全套教程。

使用过「制作器」小程序的用户,都知道它会有一个红包照片功能。利用它,小程序可以生成带小程序码、用户头像和模糊图片的分享卡片。

就像这样:

最开始,我们是通过服务器端 GD 库,来实现卡片制作。但是这种方式,会占用许多服务器的资源,而且在并发高的时候,服务器的带宽和 CPU 都不够用。

到后来,我考虑使用小程序客户端的 canvas 功能,来实现图片的处理。但是,我发现小程序 canvas 组件的问题很多——真的不是一般的多啊。

例如,在 iOS 上都能正常生成的分享卡片,到了某些 Android 手机上,经常会出现生成图片不正常的问题。甚至某款手机,在绝大部分情况下,会出现这样的结果:

按正常情况,通过 canvas 所生成的图片,应该是这样的:

花了很多时间,也联系过官方的人,也没找到具体原因。最后,我不得不暂时放弃了这个功能的研究。

某天,我突然灵机一动:为什么不通过云服务中的自动水印功能,来实现图片的自动处理呢

处理方法也很简单。

  • 首先,在七牛云存储空间中,放入一张纯白色的底图
  • 将经过高斯处理的图片、文字,配合一些视觉元素,将其作为「水印」,打在作为「原图」的白色底图上

需要注意的是,所有元素生成的位置,都需要你自己弄清楚、设定好,否则,出来的卡片效果就会错位。

有关「水印」功能的详细用法,可以阅读云服务的开发文档。

另外一个问题是,分享卡片里面的小程序 LOGO,是怎样被替换为用户头像呢?其实就是在正方形头像上,叠加了一张圆形蒙版图片。

图片中间是个圆形,背景透明。将它叠加到头像上,头像就会出现圆形效果了。

值得注意的是:生成文字水印的时候,尽可能使用默认字体。这样生成出来的图片体积,相对会小一些。

原文地址: http://www.jianshu.com/p/6913fdeea59b

「制作器」小程序使用链接

https://minapp.com/miniapp/3501/

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-09-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 知晓程序 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档