脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → html2canvas使用

html2canvas使用文档(vue举例)

 更新时间：2024年03月18日 08:48:59   作者：温其如玉_zxh  
html2canvas.js是一款可以在网页上实现页面截图的js,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功能,这篇文章主要给大家介绍了关于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);
}

四、配置项

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

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

总结

到此这篇关于html2canvas使用文档的文章就介绍到这了,更多相关html2canvas使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue+Java后端进行调试时解决跨域问题的方式

    vue+Java后端进行调试时解决跨域问题的方式

    今天在开发中遇到有点小问题，vue+Java后端进行调试时如何解决跨域问题，下面小编给大家分享解决方法，感兴趣的朋友一起看看吧
    2017-10-10
  • 聊聊element-ui 侧边栏的router问题

    聊聊element-ui 侧边栏的router问题

    这篇文章主要介绍了关于element-ui 侧边栏的router问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • Vue中使用touchstart、touchmove、touchend与click冲突问题

    Vue中使用touchstart、touchmove、touchend与click冲突问题

    这篇文章主要介绍了Vue中使用touchstart、touchmove、touchend与click冲突问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • Vue中directive的钩子函数(bind,inserted等)用法及使用说明

    Vue中directive的钩子函数(bind,inserted等)用法及使用说明

    Vue指令钩子函数（bind、inserted等）用于在不同阶段操作元素,bind绑定时初始化,inserted插入DOM后执行,update值变化时触发,componentUpdated全部更新后调用,unbind解绑时清理,根据需求选择对应钩子实现功能增强
    2025-07-07
  • Vue组件之非单文件组件的使用详解

    Vue组件之非单文件组件的使用详解

    Vue中常常会把组件分为非单文件组件和单文件组件，这篇文章主要为大家介绍了非单文件组件的具体使用方法，文中的示例代码讲解详细，需要的可以参考一下
    2023-05-05
  • vue菜单栏自适应折叠功能示例

    vue菜单栏自适应折叠功能示例

    这篇文章主要介绍了vue菜单栏自适应折叠,我这里使用的是el-menu导航菜单，监听页面宽度的改变，来改变导航菜单的折叠和展开，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-01-01
  • vue实现一个单文件组件的完整过程记录

    vue实现一个单文件组件的完整过程记录

    整个项目结构清晰,尤其单文件组件的表现力尤为突出,使得每个组件的逻辑都没有过于复杂,所以这篇文章主要给大家介绍了关于vue实现一个单文件组件的相关资料,需要的朋友可以参考下
    2021-06-06
  • Vue鼠标右键画矩形和Ctrl按键多选组件方式

    Vue鼠标右键画矩形和Ctrl按键多选组件方式

    文章介绍了一个Vue组件,该组件允许用户通过鼠标右键在画布上绘制矩形,并且支持通过Ctrl键进行多选,文章附带了组件代码和一个示例,建议读者将代码复制到自己的开发环境中进行调试
    2024-12-12
  • vue canvas绘制矩形并解决由clearRec带来的闪屏问题

    vue canvas绘制矩形并解决由clearRec带来的闪屏问题

    这篇文章主要介绍了vue canvas绘制矩形并解决由clearRec带来的闪屏问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-09-09
  • vue项目如何解决数字计算精度问题

    vue项目如何解决数字计算精度问题

    这篇文章主要介绍了vue项目如何解决数字计算精度问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论