html2canvas使用文档

一、安装

Install NPM

npm install --save html2canvas

Install Yarn

yarn add html2canvas

二、引入

import html2canvas from 'html2canvas';

三、使用

以 vue 举例，这样写起来比较方便

<div ref="picture">
    <h4>Hello world!</h4>
</div>

// 配置项
const setup = {
    useCORS: true, // 使用跨域
};
html2canvas(this.$refs.picture, setup).then((canvas) => {
    document.body.appendChild(canvas); // 自动在下方显示绘制的canvas图片
});

如果想要将图片导出，可以这样写

// 生成图片
creatImg() {
    const setup = {
        useCORS: true, // 使用跨域
    };
    html2canvas(this.$refs.picture, setup).then((canvas) => {
        const link = canvas.toDataURL("image/jpg");
        this.exportPicture(link, "文件名");
    });
}

// 导出图片
exportPicture(link, name = "未命名文件") {
    const file = document.createElement("a");
    file.style.display = "none";
    file.href = link;
    file.download = decodeURI(name);
    document.body.appendChild(file);
    file.click();
    document.body.removeChild(file);
}

四、配置项

名称	默认值	描述
allowTaint	false	是否允许跨源图像污染画布
backgroundColor	#ffffff	画布背景色（如果在DOM中未指定），为透明设置null
canvas	null	用作绘图基础的现有画布元素
foreignObjectRendering	false	如果浏览器支持ForeignObject渲染，是否使用它
imageTimeout	15000	加载图像超时（毫秒），设置为0可禁用超时
logging	true	为调试目的启用日志记录
proxy	null	用于加载跨源图像的代理的Url。如果留空，则不会加载跨原点图像。
removeContainer	true	是否清除html2canvas临时创建的克隆DOM元素
scale	window.devicePixelRatio	用于渲染的比例。默认为浏览器设备像素比率。
useCORS	false	是否尝试使用CORS从服务器加载图像
width	Element width	画布的宽度
height	Element height	画布的高度
x	Element x-offset	裁剪画布x坐标
y	Element y-offset	裁剪画布y坐标
scrollX	Element scrollX	渲染元素时要使用的x滚动位置（例如，如果元素使用位置：fixed）
scrollY	Element scrollY	渲染元素时要使用的y轴滚动位置（例如，如果元素使用位置：fixed）
windowWidth	Window.innerWidth	渲染Element时使用的窗口宽度，这可能会影响Media查询等内容
windowHeight	Window.innerHeight	渲染Element时使用的窗口高度，这可能会影响Media查询等内容

大部分情况下使用默认配置即可，如有需要，可根据配置项修改。