html2canvas详解

YDAAT • 2025-01-09 12:14 • 编程

一、html2canvas生成图片空白

html2canvas是一个用于将html页面转换为Canvas对象的js插件，使用简单，可以用于在前端制作高清的图片、PDF文件等，但在使用过程中，一些人会遇到空白的问题。以下是可能的解决方案：

1、使用空div包住页面中需要保存的内容

<div id="capture">
    <!-- 需要保存的内容 -->
</div>

html2canvas(document.querySelector("#capture")).then(canvas => {
    // do something with canvas
});

2、手动设置元素的宽度和高度

html2canvas(element, {
    width: element.offsetWidth,
    height: element.offsetHeight
}).then(canvas => {
    // do something with canvas
});

3、处理每个节点前的延迟加载动画效果

html2canvas(document.body, {
    allowTaint: true,
    useCORS: true,
    async: false,
    width: document.documentElement.offsetWidth,
    height: document.documentElement.offsetHeight
}).then(canvas => {
    // do something with canvas
});

二、html2canvas转为pdf

将html2canvas生成的Canvas对象转为PDF，可以用jsPDF库，它可以生成包含文字、表格、图像等内容的PDF文档。

html2canvas(document.body).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0);
    pdf.save('download.pdf');
});

三、html2canvas坑

html2canvas本身存在一些问题，在使用过程中需要小心。

1、html2canvas无法渲染视频和iframe

html2canvas无法渲染video标签和iframe内的内容，因为它们的内容不在DOM中。如果需要保存video标签的内容可以使用Whammy.js库。

2、html2canvas可能会出现跨域问题

当资源来自不同的域名或协议时，html2canvas可能会出现跨域问题。可以在调用html2canvas时加上useCORS: true参数。

3、html2canvas可能会出现生成图像大小不一致问题

如果在使用过程中发现生成的图像大小与预期不一致，需要手动设置所有涉及的元素的宽度和高度。

四、html2canvas options

html2canvas提供了很多配置选项，可以灵活地定制生成效果。

1、scale：调整生成的图像的缩放比例

html2canvas(document.body, {
    scale: 2
}).then(canvas => {
    // do something with canvas
});

2、backgroundColor：调整生成的图像的背景色

html2canvas(document.body, {
    backgroundColor: '#FFFFFF'
}).then(canvas => {
    // do something with canvas
});

3、proxy：配置代理服务器，用于解决跨域问题

html2canvas(document.body, {
    proxy: 'https://proxy-server.com/proxy'
}).then(canvas => {
    // do something with canvas
});

4、logging：开启日志记录

html2canvas(document.body, {
    logging: true
}).then(canvas => {
    // do something with canvas
});

五、html2canvas 参数 class选取

html2canvas的class参数用于选择需要截图的元素，同CSS选择器一样，可以选择类、ID、属性等。

1、选择类：’.className’

html2canvas(document.querySelector('.post')).then(canvas => {
    // do something with canvas
});

2、选择ID：’#elementId’

html2canvas(document.querySelector('#myElement')).then(canvas => {
    // do something with canvas
});

3、选择属性：'[data-attribute=value]’

html2canvas(document.querySelector('[data-name="John"]')).then(canvas => {
    // do something with canvas
});

html2canvas可以很方便地用于前端制作图片、PDF等。但在使用过程中需要注意一些坑，并注意参数的灵活使用。

原创文章，作者：YDAAT，如若转载，请注明出处：https://www.506064.com/n/316624.html