查看: 534|回复: 0

[文章教程] 通过JavaScript将HTML网页转为图片

[复制链接]
xuanxiao 发表于 2022-1-21 00:04:19 | 显示全部楼层 |阅读模式
html2canvas 是一个 HTML 渲染器。该脚本允许你直接在用户浏览器截取页面或部分网页的“屏幕截屏”,屏幕截图是基于 DOM,因此生成的图片并不一定 100% 一致,因为它没有制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。

QQ截图20220120235424.png
JS_html_to_image.rar (89.72 KB, 下载次数: 2, 售价: 5 个ASP币)

1,什么是 html2canvas
html2canvas 可以通过获取 HTML 的某个元素,然后生成 Canvas,从而让用户保存为图片。
html2canvas 工作原理是将当页面渲染成一个 Canvas 图片,通过读取 DOM 并将不同的样式应用到这些元素上。
html2canvas 不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。

2,适用的浏览器
只要浏览器支持 Canvas 即可,包括:Firefox 3.5+、Google Chrome、Opera 新的版本、IE9 以上的浏览器。

3,注意事项
当然并不是所有的页面元素都可以进行转换的,下面是不支持的情况:
不支持 iframe
不支持跨域图片(可以先将线上图片转换成 base64,然后用 base64 作为图片路径)
不支持 flash
不支持 transform、transition 过渡、animation 动画(备注:transform 初始布局是可以的,但是不能参与动画类的操作)

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表

在线客服

售前咨询
售后咨询
服务热线
023-58418553
微信公众号