html2canvas学习总结

html2canvas学习总结

文档链接 

功能介绍

该脚本允许您直接在用户浏览器上拍摄网页或其中一部分的“屏幕截图”。

屏幕截图基于DOM，因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上的可用信息构建屏幕截图。

安装

npm 形式

npm install --save html2canvas

script标签形式

<script src="https://files.cnblogs.com/files/mggahui/html2canvas.min.js"></script>

mini版本下载http://html2canvas.hertzen.com/dist/html2canvas.min.js

使用

html2canvas(element, options)

// element为需要渲染为canvas的dom元素
// options为参数配置选项

options参数配置如下

名称	默认值	描述
allowTaint	false	是否允许跨域图像污染画布（默认不允许渲染跨域图片）
backgroundColor	#ffffff	canvas画布背景色（如果未在DOM中指定）。设置null为透明
canvas	null	使用现有canvas元素用作绘图的基础，即在该canvas基础上继续渲染我们的element
foreignObjectRendering	false	如果浏览器支持，是否使用ForeignObject渲染
imageTimeout	15000	加载图像的超时时间（以毫秒为单位）。设置0为禁用超时。
ignoreElements	(element) => false	谓词功能，可从渲染中删除匹配的元素。
logging	true	启用日志以进行调试
onclone	null	克隆文档以进行渲染时调用的回调函数可用于修改将要渲染的内容，而不会影响原始源文档。onclone回调函数返回复制的文档根节点document，onclone：(doc)=>{}
proxy	null	用于加载跨域图像的代理的网址。如果保留为空，则不会加载跨域图像。
removeContainer	true	是否清除HTML2canvas临时创建的克隆DOM元素
scale	window.devicePixelRatio	用于渲染的缩放比。默认为浏览器设备像素比率。
useCORS	false	是否尝试使用CORS从服务器加载图像
width	element width	canvas画布的宽度
height	element width	canvas画布的高度
x	element x-offset	裁剪画布X坐标
y	element y-offset	裁剪画布y坐标
scrollX	element scrollX	渲染元素时要使用的x滚动位置（例如，如果Element使用position: fixed）
scrollY	element scrollY	渲染元素时要使用的y滚动位置（例如，如果Element使用position: fixed）
windowWidth	window.innerWidth	渲染Element时要使用的窗口宽度，这可能会影响媒体查询之类的内容
windowHeight	window.innerHeight	渲染Element时要使用的窗口高度，这可能会影响媒体查询之类的内容

 如果希望从渲染中排除某些Elements，则可以data-html2canvas-ignore向这些元素添加属性，并且html2canvas会将它们从渲染中排除。

 

（以上图片为当前博客使用html2canvas保存为图片效果，右键新标签页打开查看效果）

示例代码

    function canvasToImg(canvas) {
        var a_link = document.createElement("a");
        a_link.href = canvas.toDataURL("image/png");
        a_link.download = new Date().getTime() + ".png";
        a_link.click();
    }
    html2canvas(document.body, {
        allowTaint: true,
        useCORS: true,
    }).then(canvas => {
        canvasToImg(canvas)
    });

使用如上示例代码将当前博客文章转为png图片并保存。（可以将上述代码复制到console控制台执行查看保存效果）

对比网页和图片我们发现，以下几个问题

①，网页上部分图片资源没有渲染出来（配置参数使用了）

②，table内的长单词（window.devicePixelRatio）在渲染的图片中没有换行 ，但是长文本会换行

③，部分 css 特效样式并不兼容（css特性支持清单）

④，页面左下方的音乐播放 svg 图标没有被渲染出来

踩坑参考链接

移动端 html2canvas 踩坑记录

使用html2canvas在前端生成图片

微信wap页生成分享海报功能踩坑经验

@萍2樱释ღ( ´･ᴗ･` )