balabala: dom 转图片场景和技术方案

news/2024/6/16 7:03:47

有一天张大胖接到了产品的一个需求,需求中涉及到了小程序 和 app 两端。

主要是基于微信的一个活动,需要在 app 和小程序端生成带二维码的图片,生成图片是为了让用户可以发到朋友圈。然后用户长按带二维码的图片就可以进入到小程序了。

大胖想着生成图片也是后端把多个小图进行拼接,根本不需要前端搞,前端也搞不了这玩意,太麻烦。

后来对需求的时候,发现后端可以做但是处理起来很麻烦,需要对每个元素的坐标位置进行计算,然后绘图,甚是麻烦,而且需要对图片进行拼接生成,比较耗时。想问下前端能不能实现?

大胖反应倒是快,说前端这个也不好弄,也是需要进行坐标计算和适配,而且我们小程序做了也只能小程序用,那 app 端怎么办?

后端同学开始了各种讨论,能不能简化下UI,能不能改下展示的布局,尽量好搞一些。

此时大胖呆在一旁,好像在思考什么。他在想有没有一种通用的方案,不管页面的多么复杂都可以搞定。突然大胖拍着大腿 “啪” 的一声,信心满满的说,有办法了,而且页面不管页面多复杂都可以搞定。

大胖这个没心没肺的,嘴太快了,自己又给自己找事儿干了。因为这个方案实施起来有点复杂。

会后大胖对自己所知道的可以把动态网页转成图片的方案详细的对比了下

1. html2canvas

相信大家都知道这个,这是一个浏览器端的 js 库,可以把 dom结构转成图片。页面布局随便写,但是只能用于浏览器端。

clipboard.png

2. 后端生成

可以让后端 php、java 等在服务端进行图片拼接,然后把组合后的图片地址给到前端。

优点是可以做到通用,小程序、app等其他端都可以调用同一个图片接口。

缺点是服务端处理简单图片文字拼接可以,但是如果是针对一个复杂的网页布局可能就有点力不从心了。

3. 小程序端生成

例如微信小程序官方提供了canvas 的相关文档调用说明,也可以通过计算坐标的方式把图片和文字画上去。然后把canvas保存成图片,再下载到用户手机。

此方案和后端生成差不多。

4. phantomjs

这个库相信很多同学没接触过,但确实真的强大。他就是一个运行在服务端的无界面的浏览器。

咱们看看官方怎么介绍的:

PhantomJS是一个基于webkit的JavaScript API。它使用QtWebKit作为它核心浏览器的功能,使用webkit来编译解释执行JavaScript代码。任何你可以在基于webkit浏览器做的事情,它都能做到。它不仅是个隐形的浏览器,提供了诸如CSS选择器、支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG等,同时也提供了处理文件I/O的操作,从而使你可以向操作系统读写文件等。PhantomJS的用处可谓非常广泛,诸如网络监测、网页截屏、无需浏览器的 Web 测试、页面访问自动化等。

需要在服务端进行截屏,所以还需要一个可以访问的h5页面,另外页面必须是服务端渲染,最好不要用js渲染,截图可能有问题。

另外一个在服务端的字体需要预先设置,比如微软雅黑、 华文苹方 服务器上如果没有就需要进行安装。不然截图的字体和你的效果图不一致。

优点是 服务端截屏,可以做成通用的服务。

缺点就是 会增加前端同学的工作量,因为需要做服务,还需要做h5页面布局。当然也看怎么设计架构,如果足够通用也只需要写一次就够了。剩下的就是做h5页面了,这个就快多了。

看看官网的代码:

clipboard.png

最后

其实服务端生成图片的方法也不只这两种,服务端也有很多三方的库。这里就不多说了,大胖也不是很熟悉。

接下来大胖就用了最后的方案 - PhantomJS,去实施。

他的工作量增加了不少,任务有没有完成?

PhantomJS有没有什么坑呢?

咱们下回再说。

朋友们给大胖加油吧。

phantomjs相关参考资料

http://phantomjs.org/

http://www.cnblogs.com/bangej...

https://yq.aliyun.com/article...

欢迎关注“重度前端”,每周分享技术干货,个人感悟

clipboard.png


http://www.niftyadmin.cn/n/3738517.html

相关文章

损失函数大总结

1.定义 损失函数指的是用来估算模型的预测值和真实值之间的不一致的程度,损失函数越小代表着模型的鲁棒性更好,损失函数一般分为分类问题和回归问题。 2.分类问题的损失函数: 2.1 0-1损失: 当标签和预测值相同时为1&#xff0…

python时间函数入门_PYTHON基础-时间日期处理小结

步骤:1. 掌握几种对象及其关系2. 了解每类对象的基本操作方法3. 通过转化关系转化涉及对象1. datetime>>> import datetime>>> now datetime.datetime.now()>>> nowdatetime.datetime(2018, 1, 12, 23, 9, 12, 946118)>>> type(now)2. ti…

C#用winform实现excel数据合并

1、问题描述 一共有3表,A是源操作表,B、C目的操作表。A B C 中都有两个个相同的字段。问题:现在用A中的这个关键字段分别去B和C中取得对应项的数据,在写回A表中的对应的另外一个字段。 这个工具目前设定的是;操作excel表&#xf…

windows7安装chrome错误0x80004002

1、错误信息 报错代码:0x80004002 2、解决方案 A、先下载好chrome的离线安装包。传送门:http://rj.baidu.com/soft/detail/14744.html?ald B、win R , 键入:msconfig, 勾选: 引导 -> 引导选项 ->…

Web框架的原理

Web框架的原理 目录 Web框架本质 socket服务端 HTTP GET请求的格式:HTTP响应的格式: 自定义web框架根据不同的路径返回不同的内容根据不同的路径返回不同的内容--函数版根据不同的路径返回不同的内容--函数进阶版返回具体的HTML文件让网页动态起来服务器…

卷积神经网络中的pooling

(https://www.zhihu.com/question/41948919/answer/196368681)

python装饰器语法糖_一周一个Python语法糖:(一)装饰器

Decorator首先,我们来认识一下装饰器是什么:装饰器是给现有的模块增添新的小功能(在不改变原有模块功能的基础上)假如我有个简单笔,它只能用一种颜色进行写字我现在给它加上一只笔芯,它能换种颜色写字(又能换回来~)这就是装饰器的…

全连接层的解释

https://zhuanlan.zhihu.com/p/33841176