html2canvas使用文档

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

大部分情况下使用默认配置即可,如有需要,可根据配置项修改。文章来源地址https://www.toymoban.com/news/detail-844037.html

到了这里,关于html2canvas使用文档的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/m0_53808238/article/details/129367733

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端html2canvas和dom-to-image实现截图功能

    目录 需求 历劫过程 截图知识点 html2canvas 文档地址 封装 使用教程  dom-to-image-more 文档地址 封装 使用教程 解决跨域问题 以下是我花了大把时间,薅秃头得出来的最终结果, dom-to-image-more截图时间快到可以让复杂的页面仅需2-3S就能完成截图,内容有点多,请保持耐心慢慢看

    2024年02月15日
    浏览(14)
  • vue使用html2canvas优化---节点过滤

    当你使用html2canvas对某个节点进行截图时,项目小dom节点少那还没什么性能问题,如果是个大项目,有成百上千个dom节点,那将是非常头疼的事情(产品经理:小张啊,你这个截图功能为什么需要这个长的时间,这让客户怎么用,重新改。小张:********...)。不多bb了,直接开

    2024年02月12日
    浏览(10)
  • Html转PDF,前端JS实现Html页面导出PDF(html2canvas+jspdf)

    一、背景介绍 ​ 当我们在不想改变后端代码的同时想是纯html页面导出PDF,那么(html2canvas+jspdf)就是无疑最好的选择,导出时它不占用我们服务器的资源,而是由用户本地自行执行js文件下载PDF,不占用我们系统的带宽,所以这无非是最好的选择方式。 二、疑问 1、为什么要

    2024年01月23日
    浏览(10)
  • 前端生成pdf之html2canvas+jsPDF,以及解决图片不显示bug

    开发背景: 需要给页面中相应的内容生成pdf,查找文档后发现要用到两个插件。html2canvas 以及 jsPDF html2canvas 给dom结构转化为canvas,然后生成各种类型图片 jsPDF 把canvas 生成的图片url 转化为pdf 参数 image:表示要插入的图片资源,可以是图片文件的路径或者base64编码字符串。

    2024年02月02日
    浏览(12)
  • 解决使用 html2canvas 截图不全问题

    1、截图不全 之前没用过这个,网上找了代码之后发现有滚动条的情况下会截图不全,仅能展示出当前页面展示出来的内容,类似于这种情况,这是带滚动条的html,第一张和第二张分别为滚动条在顶部以及在底部的展现 下载成pdf之后分别为这样,只有窗口展示的部分,滚动条

    2024年02月11日
    浏览(11)
  • 【前端】html2canvas生成图片空白排查data:;(js vue react uniapp)

    因为要做一个分享图,就用到了html2canvas,一开始是好好的,今天随便测了下,发现图片显示不出来了。打印了下,生成的图片链接变成了 data:; 。后面一步一步地排查,发现是页面内容太多了,删减一点内容就能显示出来。然后我又去认真看了下html2canvas的各个参数,发现可

    2024年02月03日
    浏览(15)
  • vue中使用html2canvas+jsPDF实现pdf的导出

    html2canvas依赖 jspdf依赖 pdf导出 以导出横向,A4大小的pdf为例 规律:1. html2canvas 中,在保持jsPDF中的宽高不变的情况下,设置html2canvas中的 width 和 height 值越小,导出的pdf越显示不全(会被放大,只能看到局部),反之值越大,导出的pdf越显示完整(值也不能过大,过大在pdf中就显

    2024年02月12日
    浏览(9)
  • Vue使用html2canvas将DOM节点生成对应的PDF

    要通过Vue使用html2canvas将DOM节点生成对应的PDF,您需要安装html2canvas和jspdf这两个库。html2canvas用于将DOM节点转换为Canvas,而jspdf用于将Canvas转换为PDF。以下是一个简单的示例代码,展示了如何使用html2canvas和jspdf生成PDF文件: 首先,安装html2canvas和jspdf依赖: 然后,在Vue组件中

    2024年02月11日
    浏览(10)
  • html2canvas截图模糊问题

    最近项目中使用的html2canvas插件打印报表时,发现出现报表模糊的问题,而实际上是插件生成的图片中的像素发生了偏移。 后来查阅html2canvas源码中,发现了以下参数: 参数名称 默认值 描述 scale 1 按比例增加分辨率(2=双倍) dpi 96 将分辨率提高到特定的DPI(每英寸点数)

    2024年01月17日
    浏览(11)
  • (vue)Vue项目中使用jsPDF和html2canvas生成PDF

    效果: 1.:安装jsPDF和html2canvas 2.在需要生成PDF文档的组件中引入jsPDF和html2canvas 解决参考: 1.https://www.jianshu.com/p/31d37bef539b 2.https://www.php.cn/faq/556634.html 3.https://blog.csdn.net/m0_54967474/article/details/123820384

    2024年02月10日
    浏览(10)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包