最近在项目中需要实现截图的功能，但是图片的内容是动态的，后端没有提供接口，所以需要使用js实现，比较有名的是html2Canvas和dom-to-image。

html2Canvas

import htmlToCanvas from 'html2canvas'

安装好之后，直接调用函数htmlToCanvas(element, options)，这个函数会返回一个Promise，通过调用then()方法，可以得到一个canvas对象，然后就可以进行相应操作

element：需要截取的dom元素

options：一个对象

options可配置的属性

allowTaint false 是否允许跨域图像污染画布
backgroundColor #ffffff 画布背景色（如果未在DOM中指定）。设置null为透明
canvas null 现有canvas元素用作绘图的基础
foreignObjectRendering false 如果浏览器支持，是否使用ForeignObject渲染
imageTimeout 15000 加载图像的超时时间（以毫秒为单位）。设置0为禁用超时。
ignoreElements (element) => false 谓词功能，可从渲染中删除匹配的元素。
logging true 启用日志以进行调试
onclone null 克隆文档以进行渲染时调用的回调函数可用于修改将要渲染的内容，而不会影响原始源文档。
proxy null 代理将用于加载跨域图像的网址。如果保留为空，则不会加载跨域图像。
removeContainer true 是否清除html2canvas临时创建的克隆DOM元素
scale window.devicePixelRatio 用于渲染的比例。默认为浏览器设备像素比率。
useCORS false 是否尝试使用CORS从服务器加载图像
width Element 宽度的宽度 canvas
height Element 高度的高度 canvas
X Element X偏移裁剪画布X坐标
y Element y偏移裁剪画布y坐标
scrollX Element 滚动X 渲染元素时要使用的x滚动位置（例如，如果Element使用position: fixed）
scrollY Element 滚动Y 呈现元素时要使用的y-scroll位置（例如，如果Element使用position: fixed）
windowWidth Window.innerWidth 渲染时使用的窗口宽度Element，这可能会影响媒体查询之类的内容
windowHeight Window.innerHeight 渲染时要使用的窗口高度Element，这可能会影响媒体查询之类的内容

基本调用

htmlToCanvas(this.$refs.certificateWrap, {
  backgroundColor: null, // 设置截图的背景色
  useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
}).then(canvas => {
  const imgUrl = canvas.toDataURL('image/png')
  console.log(imgUrl)
})

dom-to-image

import domToImage from "dom-to-image";

安装之后，使用domToImage对象可以调用内置的方法，设置相应属性

方法

toPng() 将节点转化为png格式的图片
toJpeg() 将节点转化为jpg格式的图片
toSvg() 将节点转化为svg格式的图片，生成的图片的格式都是base64格式
toBlob() 将节点转化为二进制格式，这个可以直接将图片下载
toPixelData() 获取原始像素值，以Uint8Array 数组的形式返回，每4个数组元素表示一个像素点，即rgba值

属性

filter：过滤器节点中默写不需要的节点；
bgcolor：图片背景颜色；
height, width：图片宽高；
style：传入节点的样式，可以是任何有效的样式；
quality：图片的质量，也就是清晰度；
cacheBust：将时间戳加入到图片的url中，相当于添加新的图片；
imagePlaceholder：图片生成失败时，在图片上面的提示，相当于img标签的alt

基本调用

domToImage
  .toPng(document.querySelector(ele))
  .then(function (dataUrl) {
    var img = new Image();
    img.title="dom-to-image"
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch(function (error) {
    console.error("oops, something went wrong!", error);
  });

优缺点比较

html2Canvas兼容性好，可以向下兼容到ie9，缺点是页面出现滚动条时，截图某个dom会出现图片不完整的情况，需要重置滚动条才能正常截图（截图整个网页，则可以通过设置相应参数进行处理）

dom-to-canvas截图某个dom不受滚动条影响，不需要重置滚动条也能正常截图；可以返回多种格式的数据；但是兼容性差，只支持Chrome、Firefox浏览器

总结

不考虑浏览器兼容性可以使用dom-to-image；需要兼容多种浏览器只能选择html2canavs，记得重置滚动条

前端截图插件使用总结

html2Canvas

options可配置的属性

基本调用

dom-to-image

基本调用

优缺点比较

总结