html2canvas - screenshot web pagehtml2canvas 简介 html2canvas是

html2canvas 简介

html2canvas是一个实现网页截图的库，允许你直接在用户浏览器上获取网页的截图或部分内容。屏幕截图是基于DOM的，因为它不做实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图，因此它可能不是100%准确的。它只能正确地描述它所理解的属性，这意味着有许多CSS属性不起作用，比如动画，iframe此类。官网链接（ html2canvas.hertzen.com/

// Install NPM
npm install --save html2canvas

// Install Yarn
yarn add html2canvas

// use
import html2canvas from 'html2canvas'

// html
<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

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

配置项options

属性名	默认值	描述
allowTaint	false	是否允许不同源的图片污染画布
ignoreElements	(element) => false	布尔函数，用于从渲染中删除匹配元素
proxy	null	Url 到代理，用于加载跨域图片资源。如果留空，则不会加载跨域图片。
removeContainer	true	是否清理克隆的 DOM 元素，html2canvas 暂时创建。
useCORS	false	是否尝试使用 CORS 从服务器加载图片
width	Element width	canvas 画布宽度
height	Element height	canvas 画布高度

Tips:

允许截屏非本地图片（比如在oss上 options需要配置 { useCORS: true, allowTaint: true } 对应的img属性需要配置 crossOrigin="anonymous"

{
    useCORS: true,
    allowTaint: true
}

<Image imgProps={{ crossOrigin: 'anonymous' }}/>

遇到img做为bggroud的时候遇到img作为backgroud的时候，这个时候对background-image没有crossOrigin属性

//把图片提前加载，类似这样

<Image
  src={bgImgSrc}
  crossOrigin="anonymous"
  style={{ display: 'none' }}
/>
<div style={{ backgroundImage: `url('${bgImgSrc}')` }}>
</div>

截屏时候需要忽略掉部分元素

{
  ignoreElements: filterPrint,
}

 const filterPrint = (element: Element) => {
  const elementClass = element.className.toString();
  return elementClass.includes('xxx') || elementClass.includes('editText');
};