前端domtoimage生成截图

前端生成截图有多种方式：

1. 使用html2canvas，在之前文章中已有具体介绍（使用html2canvas生成截图）这个插件在生成截图的时候有一些弊端，在canvas绘制时耗时长，且绘制时屏幕会阻塞无法操作
2. 使用domtoimage（官方文档）这个插件在使用时会相对丝滑很多，一下简单介绍使用方法（具体可结合使用html2canvas生成截图食用）

	npm install dom-to-image //下载插件
	
	import domtoimage from 'dom-to-image'; //引入

    const screenImage = (screen) => { //screen为要下载的dom元素
      return new Promise((resolve, reject) => {
        const formData = new FormData()
        domtoimage.toBlob(screen, {  //直接转化为二进制格式，可以直接将图片下载
          style: {
            backgroundColor: '#17496D' //给它一个背景色
          }
        })
          .then(function(blob) {
            formData.append('image', blob, 'image.png')
            resolve(formData)
          })
          .catch(function(error) {
            console.error('截图生成失败', error)
          })
      })
    }

domtoimage方法

domtoimage.toPng(…);将节点转化为png格式的图片 domtoimage.toJpeg(…);将节点转化为jpg格式的图片
domtoimage.toSvg(…);将节点转化为svg格式的图片，生成的图片的格式都是base64格式
domtoimage.toBlob(…);将节点转化为二进制格式，这个可以直接将图片下载
domtoimage.toPixelData(…);获取原始像素值，以Uint8Array
数组的形式返回，每4个数组元素表示一个像素点，即rgba值。这个方法也是挺实用的，可以用于WebGL中编写着色器颜色。

domtoimage属性

filter ： 过滤器节点中默写不需要的节点；
bgcolor ： 图片背景颜色；
height, width ： 图片宽高；
style：传入节点的样式，可以是任何有效的样式；
quality ： 图片的质量，也就是清晰度；一个介于 0 和 1 之间的数字，表示 JPEG图像的图像质量（例如 0.92 => 92%）。默认为 1.0 (100%)
cacheBust ：将时间戳加入到图片的url中，相当于添加新的图片；
imagePlaceholder ：图片生成失败时，在图片上面的提示，相当于img标签的alt；