图片处理(海报生成 and 二维码生成),由前端处理还是后端处理好?

2021-02-08 10:18:55 +08:00
 AquanllR

前端生成慢,后端生成样式难把控。 想看看大佬们的看法和建议

6369 次点击
所在节点    程序员
56 条回复
Lemeng
2021-02-08 22:12:34 +08:00
前端
foxcell
2021-02-09 08:18:43 +08:00
前端
没有必要的计算量还是扔给用户端分担
markgor
2021-02-09 12:22:56 +08:00
@AquanllR 后端结果统一且稳定,而且生成海报这个业务并发量也不大...
@Exia 前端其实不可控因素太多,特别是多端环境下的开发...哪怕只是 H5,不同内核呈现出的效果都有一定差异。
@stevenkang 想多了,后端处理基本都是跑 CPU 资源,占用的大户是 CPU>带宽>内存。

其实结合上面所有的观点,都是建议 前端生成,理由是节省资源和带宽。

这点我同意,但我也给我之前项目经验给你参考:

业务 1:生成业务员名片,格式固定,获取头像、姓名、部门、二维码,复制到模板对应位置即可。
方案:PC 前端生成名片
坑:浏览器分辨率,浏览器缩放,屏幕大小(有些用 PC,有些用手机)
处理结果:被人 @了 2 周,终于稳定了;其中缩放功能导致的异常没法解决,只能建议他们别缩放。

业务 2:客户手机端产品海报生成,产品图为主图,背景为产品图+300 像素,左边放产品名称和推荐人头像姓名,又边放产品链接二维码;
方案 1:前端生成
坑:产品名称过长,昵称含有特殊字符的,直接 GG 了,多端( h5,微信小程序,抖音小程序)展示的效果不一致,其中印象最深的是微信小程序 IPHONE7 机型,完全走样。基本功能上线后天天被人 @ 。

方案 2:后端生成
坑:由于后续海报图增加了价格显示,但是产品价格会改变,当初做缓存的时候没考虑到这个因素,导致某天突然被 @说海报的价格不一致......。
处理结果:把用户昵称 + 产品 ID + 产品价格 做个 MD5,请求是判断是否存在,存在就直接返回,不存在就走生成逻辑。
---至今稳定,也没出现 CPU 毛刺之类,后续还加入了 QRCODE 查找替换的功能....
后来也有过小坑,带宽偶尔出现毛刺,查监控找不到规律。
某来突然发现是用户下载海报时候导致的。因为部分图片大小逼近 4~5MB 。(产品主图有做 CDN 缓存,但是生成的海报没做缓存)
解决方法:用户->CDN->COS->源;



结合上面自身案例,结论:
后端生成
优点:稳定,生成结果统一、后期海报需求变复杂的情况下也能支撑。
缺点是:
1 、原图过大的话海报会影响带宽----通过 CDN 解决
2 、防止 CPU 瞬间飙升---通过判断文件是否已经生成(缓存),要求再高的话可以单独一个服务出来。


前端生成
优点:节省计算资源、带宽;
缺点:不同终端不同内核结果不一,无法支撑复杂业务;



BTW:
如果你把标题改为 “后端处理海报 AND 二维码 的能力 和前端处理的能力对比”,估计你会得到不一样的结果。
zuiye111
2021-02-09 15:21:16 +08:00
正好最近在做一个海报中心项目,当时做方案时也是在考虑前端生成还是后端生成,所以这个问题我也回答下
我们的产品形态是小程序
1 、前端生成
优点:对后台友好,由于我们项目后台都是 C++,要找一个画图的库还是比较麻烦,前端合成可以降低后端开发压力,其次可以充分利用客户端计算性能,灵活
缺点:就像上面说的,需要考虑不同机型适配,字体问题,其次,要考虑前端生成的海报如何传给后台?传二进制流?还是合成后上传 CDN 再给后台?再者,由于我们还支持用户上传图片,小程序里可能支持性不够好
2 、后台合成
优点:可控性,可靠性,统一性更好
缺点:开发成本较高
最终和前端同事讨论比较,还是选择后台单独写个合成图片的服务,前端使用 svg 渲染海报模板,用户编辑后,再把 svg 转 json 传给后台,后台合成图片并上传 cdn,返回给前端 cdn 地址,最终,经过优化,合成的速度基本控制在 1~2s 。
目前我们海报中心小程序已经在灰度中,支持特殊字体,好友码,上传图片等功能,如下图
https://wx.gtimg.com/resource/feuploader/202102/b540d53198dd75d1b2c2d9cad6453014_1080x2337.jpg
sujin190
2021-02-09 18:18:49 +08:00
@stevenkang 后端 2d 绘图,cpu 绘制的吧,而且现在用的比较多的云主机似乎没有 gpu 的吧
AquanllR
2021-02-20 12:00:16 +08:00
@markgor 感谢耐心的解答
AquanllR
2021-02-20 12:00:45 +08:00
@DiamondYuan 是个不错的方案,纳入考虑范围
AquanllR
2021-02-20 13:43:59 +08:00
@markgor 有一个疑问就是业务 2 的方案 2,会出现一种场景就是,产品名称参数修改了,海报上面的标题因为已经存在了,不会重新生成,而导致海报上的数据是旧的问题。
感觉得商品编辑修改的时候同步去修改
markgor
2021-02-20 14:28:39 +08:00
@AquanllR
>产品名称参数修改了,海报上面的标题因为已经存在了,不会重新生成,而导致海报上的数据是旧的问题。
前端传:价格-产品标题-产品图片 url-openID(userID)-用户名称
后端:根据上面的信息,组合字符串,在走个 MD5,出来的结果就能保证一致了。

>感觉得商品编辑修改的时候同步去修改
应该不可以吧,看你业务海报图是否需要用户信息。
如果不需要用户信息可以。
如果需要用户信息那你触发的地方只有用户点击生成后吧?
markgor
2021-02-20 14:34:47 +08:00
@AquanllR
前端:POST->price 、title 、posterUrl 、openID 、nickName
后端:
//简单:
$FILENAME = MD5($title . $posterUrl . $price . $openID . $nickName);
//复杂:(感觉没必要)
$FILENAME = MD5(md5($title) . md5($posterUrl) . md5($price) . md5($openID) . MD5($nickName));

//判断海报是否已经生成:
$FILENAME .= '.jpg';

if(is_file($_PATH_TO_DIR . $FILENAME)){
//存在:输出
}

//不存在:进入生成流程





--------------
不知道怎么表达,文字功底薄弱,
中心思想就是把影响生成的条件(变量)并在一起,生成个 MD5,然后判断文件是否已经生成。
AquanllR
2021-02-20 16:05:26 +08:00
@markgor 十分感谢!现在问题已经很明朗了~再次感谢
AquanllR
2021-02-20 16:05:45 +08:00
感谢大家的热情讨论!
xmsz
2023-02-09 12:08:12 +08:00
综合 我认为应该是后端...

如果直说浪费后端资源 /客户端 1v1 的,那应该没做过,或者天真一点的,或者海报就很简单,或者是完全不追求生成效果,或者完全不管用户反馈的场景...


前端生成的问题就是
1. 复杂海报每次生成需要时间,是每次,用户用一次生成一次。体验并不好,除非你生成后再放到 CDN 上(那还不如...)。我们之前开发的头像小程序就是,蛮尴尬的...
2. 遇到字体文件,吐血... 你总不能给客户端下载个 10m 的字体?
3. 最恶心的来了,你这个服务只能兼容 90%左右的情况,而剩下 10%会搞死你
...

特别是最后一点,就算你兼容的是 99%,那 1%还是会搞死你。
一般的人根本不懂兼容,他只觉得没能兼容 100%就是你的问题,你直接气疯...
而且我们公司有个后端程序员居然也怎么想... 真的尴尬


对于后端来说,只需要考虑『资源』问题
对于产品、设计、前端来说,要考虑的不仅仅是『资源』,还要『兼容』、『效果』、『体验』....

所以综合起来肯定是后端生成


当然,如果其他前端好的方案也可以讨论
我们 web 端和小程序,基本已经穷尽了,当然自己也用 canvas 写了,但效果真的...
AquanllR
2023-02-09 14:58:36 +08:00
我们开始是先使用了前端生成的,最后最终方案走的是后端生成方案进行了
@xmsz
lizy0329
2024-07-25 12:24:25 +08:00
1 Dom -> image ( IOS 兼容性很差)
2 Dom -> base64 ( html2canvas 有很多 BUG )
3 Dom -> svg -> base64 -> 七牛返回 png 等 image

3 这样可行?
lizy0329
2024-07-25 12:31:47 +08:00
@zuiye111 yes
SVG to Image 在后端进行,可用性是最棒的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/752267

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX