将html转图片-实现网页截图与ui对比实践方案

在线体验

• https://cssbattle.wuwenzhou.com.cn/index 来试一试，真的勇士看自己能下多少层！！！

css.png

需求分析

• 将html代码转成图片。
• 场景类似cssbattle这样对比代码，ui检测，或者在线生成pdf,png这样的图表，书籍等等

常见解决方案访问国外网站

前端方案

• git地址： html2canvas实现原理 使用dom在canvas中渲染，再使用canvas转图片，然后在保存成base64的实践
• 优势：实践起来很简单。
• 劣势：css3支持度不好，截图应对不同场景需要计算宽高，上传数据交互之间也相对麻烦，接口数据可以被修改，应该上传的本身已经是图片而不是代码了后面的逻辑就不能得到很好的保证。

后端方案

• git地址：wkhtmltopdf 这样c++方案
• 优势：使用方便有python这样包可以封装调用，截图效果好无需其他转换
• 劣势：在docker安装比较麻烦，css3支持力度比较差

其他方案

• 谷歌插件或者付费网站等等
• 优势：使用方便
• 劣势：业务结合复杂度高，只能在特定场景下面使用，付费那绝对是不可能的

原生方式

• chorme，使用本身能力截图
• 优势：还原度最高
• 劣势：安装复杂，截图颜色值需要转换

技术选型

• 综合考虑还是使用原生能力，还原度是第一述求

代码实现

pyton代码

• 封装截图能力 git地址:html2image

图片对比 ，

ps: 为什么不用常见的图片比较方法类型：均值、差值、感知哈希算法，三直方图算法和单通道等等算法，因为当前的场景是比较两个图片是否一致而不是相似度的比较，不需要相似值，而是决定误差是多少

docker容器化

总结

• 为什么是python？图片处理和ai后续扩展是选型pyhon最重要的原因，场景性和长久性的选择。
• python部署实在很麻烦，环境依赖项比较多。
• 本地开发和docker容器内部的一致性很重要，本地代码是好的，进入容器内代码就不能正常运转，这次开发的最大感悟。
• 容器化部署和升级这次确实给我带来极大的便捷，脚本写好流程，构建docker,发布docker,远程使用docker-watchtower监听容器变化更新重启确实很爽。
• 祖国母亲生日快乐，大家节日快乐！！！