html2canvas截图地图和看到的不一样_Web项目集成截图功能

html2canvas

官网：https://html2canvas.hertzen.com/

官网截图

介绍

html2canvas是一个不依赖第三方的截图插件，使用它可以在用户浏览器截取网页或部分网页的屏幕截图；屏幕截图是基于DOM的，所以它可能无法保证100%和看到的一致，因为它实际上不是真正的屏幕截图，而是根据页面的信息构造出的图片。由于它的工作原理，暂时只支持它所支持的css属性，详细的文档可以参照官方文档

安装和使用方法

npm install html2canvas

import html2canvas from 'html2canvas';

//OR 到官网下载，引入脚本

DEMO：

• html

Hello world!

• Javascript

html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas)});

详细配置

如果你想将某些Elements 排除在渲染之外，可以data-html2canvas-ignore向这些元素添加属性，html2canvas会将它们从渲染中排除。如果要加载位于页面原点之外的图像，可以使用代理加载图像，详情参考官网介绍

官网示例截图