html2canvas的问题及应用

1.安装方式

1.1 npm 安装

npm install --save html2canvas

1.2 Yarn 安装

yarn add html2canvas

1.3 传统引入

 <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

2.使用方式

2.1 HTML

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

2.2 javascript

 html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas);
    const base64 = canvas.toDataURL();	// 可生成base64
});

3.注意事项

3.1 页面滑动时，截图不全。

解：可在截图事件时，把页面滚动条置顶。如：

 document.body.scrollTop = 0

3.2 iOS13 .then无法回调的问题

解：需另外引入rc4版本文件即可
下载地址：https://github.com/niklasvh/html2canvas/releases/tag/v1.0.0-rc.4

3.3 不兼容CSS3

解：最好不要用css3样式去写需要截图的盒子，因为无法呈现。

3.4 图片跨域问题

如遇截图中的图片无法渲染上去，则考虑是跨域问题。
解：在调用html2canvas时，添加{useCORS: true}参数 如：

 html2canvas(document.querySelector("#capture"), {useCORS: true}).then(canvas => {
    document.body.appendChild(canvas);
    const base64 = canvas.toDataURL();	// 可生成base64
});

如果还是无法解决，建议让后端人员转成base64后，再用即可！

3.5 iOS报 ‘maximum call stack size exceeded’

当我们用后端转过来的base64图片时，iOS会因为内容过大，超出最大调用堆栈。
解：可对base64进行转换，转换成blob，再由blob生成objectURL，代码如下：

function base64ToBlob(base64) {
    let parts = base64.split(';base64,');
    let contentType = parts[0].split(':')[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;

    let uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {type: contentType});
},
let url = URL.createObjectURL(base64ToBlob('base64字符串'))

4.配置参数表

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

最后提供官方网址：http://html2canvas.hertzen.com/configuration

注：爱护原创，转载请说明出处