专栏首页知晓程序开发 | 小程序「分享图」生成难?一招教你轻松解决

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

作者:charliesong

知晓程序注:

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

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

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

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

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

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

就像这样:

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

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

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

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

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

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

处理方法也很简单。

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

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

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

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

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

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

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

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

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

本文分享自微信公众号 - 知晓程序(zxcx0101),作者:让你更知小程序的

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 电台小程序能锁屏播放吗 / 在线处理图片的小程序 / 公众号怎么关联小程序 | 小程序问答 #14

    但是,由于微信群功能的不足,在群里要组织些活动总是很麻烦,如果你也有同样的困扰,不防试试「群幂群插件」小程序,一定能满足你管理微信群的所有需求。

    知晓君
  • 用小程序发的群公告被刷走了,还能找回来吗?| 小程序问答 #56

    如果用过「群里有事」、「群空间助手」这类针对群聊天的小程序,没准会遇到一个问题:在群聊里分享一张小程序卡片,很容易被群里其他人的聊天刷走。想要在聊天里找回这张卡...

    知晓君
  • 重要通知:今年「五一」,所有群主工作减半

    知晓君
  • Python 基础编写基于浏览器爬虫

    爬虫程序分很多种,有指定区域 文字 图片 内容 爬取,有通过某引擎进行爬取大数据,下面简单的介绍下通过搜索引擎来进行关键词爬取数据

    重生信息安全
  • 【应急响应】windows入侵排查思路

    当企业发生黑客入侵、系统崩溃或其它影响业务正常运行的安全事件时,急需第一时间进行处理,使企业的网络信息系统在最短时间内恢复正常工作,进一步查找...

    Bypass
  • Python第十四课:Python解释器

    如果你是第一次接触这个概念,那你可能会一脸懵逼,但事实上你早就接触过Python解释器了,甚至于用过。顾名思义,解释器就是能够解释Python代码的工具。当我们...

    HuangWeiAI
  • 容器Docker学习系列四~源的修改增加效率

    新公司现在开发环境都是在Liunx 下进行开发,系统是Ubuntu 18.4的版本.但是我们经常用Liunx系统的人就知道 我们经常用原生的源下载软件。速度不是...

    用户2196435
  • 学编程一开始就值得坚持的习惯

    学习任何一门技术,在一开始就养成优秀的习惯,这是非常重要的。 1 看官方文档 遇到不清楚或不懂的知识点,先去看官方文档! 很多官方文档是英文的,硬着头皮也要看...

    老九君
  • Python数据分析-数据探索下

    主题 数据探索 接着上一节的内容~ 二、数据特征分析 5. 相关性分析 (1)直接描述散点图 从散点图可以比较直观地看书两个变量的相关性。(一般分为完全正...

    企鹅号小编
  • 晓快讯 | 小程序也有「新关注回复」了!

    目前,用户关注「同程旅游网」公众号,公众号就会自动下发一张小程序卡片。点击卡片,用户就可以进入同程旅游旗下的小程序。

    知晓君

扫码关注云+社区

领取腾讯云代金券