通过JavaScript将HTML网页转为图片

html2canvas 是一个 HTML 渲染器。该脚本允许你直接在用户浏览器截取页面或部分网页的“屏幕截屏”，屏幕截图是基于 DOM，因此生成的图片并不一定 100% 一致，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。


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

2022-1-21 00:02 上传

点击文件名下载附件

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 初始布局是可以的，但是不能参与动画类的操作）