html2canvas使用文档-Toy模板网

这篇具有很好参考价值的文章主要介绍了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查询等内容