ibcadmin 发表于 2019-10-24 09:49:14

小程序生成图片分享朋友圈

小步调生成图片分享朋友圈

小步调开发者都盼望自己的小步调得以广泛流传,由于不少小步调都设计了许多转发鼓励举动,但分享小步调到朋友圈(或其他外部平台)一直是一个困难。一个常见但方案就是生因素享海报、分享图片。但生因素享图片在技能上却也是一个困难。
技能选型

现在常用技能方案基天职为三种:

[*]利用 canvas 绘图并生成
[*]利用后端绘图库进行绘制,返回给小步调端
[*]利用服务端开一个浏览器进行 HTML 渲染,并截图返回给小步调端
第一种方案:要求较高,canvas 和纯 html 布局相去甚远,零根本学习资本较高,而且在差别的微信浏览器中结果不可预期,想短时间内做出精致可控的生成图片不轻易。实操的时候发现了一个非常麻烦的事变:网络图片或者 base64 图片都无法直接在 canvas 里渲染体现,要先下载好传进去。
第二种方案:后端库可以完成较为简单的需求,但字体加载、阴影、圆角、透明等方案结果需要精调,如果笔墨需要截断或动态伸缩长度时并不轻易处理。图片的截取和伸缩自顺应也不机动。而且选用这种方案相当于需要把 UI 布局的工作丢给后端工程师去办理,这不是他们擅长的范围,结果未必会好。
第三种方案:页面的绘制方面,纯前端技能即可完成,难度低,完成度高,但是需要在后端起一个 node 服务开启 puppeteer 去控礼服务端 Chrome 浏览器。这种方案的缺点就是资本太高,我们和业界偕行都测算过,结果差不多:4 核 16G 的服务器生成图片的 QPS 大概只有 10-20,相当于一秒钟较差情况只能生成 10 张图片,这对于突发的大量分享需求并不能满意,而且这种设置的服务器,不能摆设其他服务,只跑这个服务就会用尽大部门资源。
费用上:只单单算 5M 带宽的服务器费用一个月就要 700+ 人民币,流量和图片托管费用另算。此方案的最小化实现:至少需要 1 核 2G 的服务器才气较为顺畅地完成一次顺遂截图,但是照旧要处理浏览器无相应假死等情况,较为复杂。但综合来看,这种方案是结果最好最为机动的。
快海报小步调分享图生成服务

快海报 kuaihaibao.com 是专门提供小步调分享海报生成服务的,技能上用的就是上面所述的第三种方案,但是只需要调用他的 API 就可以完成,不需要开发者维护 puppeteer 和 headless Chrome,而且资本较低,一张分享图的最低生成资本是 0.033 元。
实在真正集成到自己的服务中时,平均资本要比这个低,由于有些生成的图片的二维码,如果不带用户个人信息(不给分享的用户返利)时,可以生成一次之后永久缓存起来,其他用户再分享同一个东西都用缓存好的图片,综合资本就降下来了。
算一下资本:

[*]比方说一个刚起步的小步调日活 5000(对于刚起步的小步调实在已经很高了吧)
[*]假设有 5% 的用户生因素享图
[*]也就是每天生成 250 张分享图,一个月会生成 7500 张分享图
这样的话每个月资本就是 250 元人民币左右,相比 700+ 人民币但服务器资本省太多了。这是测算比较高的指标,而且是完全不应用缓存方案的情况。
如果你的小步调还处于冷启动的阶段:

[*]日活 500
[*]假设有 5% 的用户生因素享图
[*]也就是每天生成 25 张分享图,一个月会生成 750 张分享图
每月资本 25 元。比 1 核 2G 的最小化自摆设方案也要自制。但带来的收益是无穷的,750 张分享图发到朋友圈,每张分享图 1000 受众浏览,一个月就是将近 750000 人次分享受众。
调用 API

首先去 https://kuaihaibao.com/ 注册账号,验证邮箱激活之后,实在就可以先测试用了,每个账号有 100 次测试额度,测试生成的图片带水印。
网站左侧的 [文档] 页面能找到集成文档,非常简单,一共就只有一个核心 API,通过 HTTP 调用的。
先在【开发】->【设置】中激活 token


然后打开 【开发】->【模板】中,找到自己喜欢的模版。由于我只想生成一个简单的分享图片,以是最简单的方式就是利用网站内置的模版,内置模板现在有 8 款,应该能满意大部门小步调的需求了,抽奖、打卡、图文、笔墨、电商都有,改一改文案和图片就可以了。
我选了这个抽奖模板:


按照 https://kuaihaibao.com/doc/docs/template/kzccda95.html 文档形貌的 JSON 改成我需要的:
{"backgroundColor": "#fafafa","backgroundImage": "","user": {    "avatar": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/girl_2.jpg",    "nickname": "我是测试账号",    "color": "#666"},"tip": "邀请你来抽奖","qrcode": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/sample_qr_0.png","records": [    {      "title": "一等奖",      "desc": "2019 年 11 月 16 日 10:00 开奖",      "image": "https://s3.cn-northwest-1.amazonaws.com.cn/res.weiyidan.com/production/10000002/4109f8e51a8f43b9816dbc8fe636e22a.jpeg"    }],"brand": "我的测试抽奖小步调","slogan": "快来和我一起抽吧!","metaColor": "#999"}然后打开 Terminal 做一次哀求试试:
curl -X "POST" "https://api.kuaihaibao.com/services/screenshot" \   -H 'Authorization: Bearer 这里写你自己的 token' \   -H 'Content-Type: application/json; charset=utf-8' \   -d /pre>{"template": "kzccda95","data": {    "qrcode": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/sample_qr_0.png",    "records": [      {      "title": "一等奖",      "desc": "2019 年 11 月 16 日 10:00 开奖",      "image": "https://s3.cn-northwest-1.amazonaws.com.cn/res.weiyidan.com/production/10000002/4109f8e51a8f43b9816dbc8fe636e22a.jpeg"      }    ],    "tip": "邀请你来抽奖",    "slogan": "快来和我一起抽吧!",    "metaColor": "#999",    "brand": "我的测试抽奖小步调",    "backgroundImage": "",    "backgroundColor": "#fafafa",    "user": {      "avatar": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/girl_2.jpg",      "nickname": "我是测试账号",      "color": "#666"    }}}'返回了结果:
{"success": true,"data": {    "name": "iPhone 5",    "image": "https://khb-test-oss.oss-cn-shanghai.aliyuncs.com/screenshot/4fa63f2a3605cbdece90c659cbccea619d9cf9fa?x-oss-process=style/test_watermark"}}打开图片地址看看:


速率很快,图片很漂亮,只是中间带水印,充值后成为付费用户,再生成的图片水印就自动取掉了。
后端集成

这里参考快海报官方给的最佳实践的逻辑参考图:


以是后端只需要做一件事,就是提供一个 API 给客户端用,这个 API 被调用的时候去哀求快海报的服务器,再把结果返回给小步调就好了。






来源:https://www.cnblogs.com/yuangexcx/archive/2019/10/23/11727065.html
页: [1]
查看完整版本: 小程序生成图片分享朋友圈