js前端截图，dom元素截图

记录两个tools方法：

1、借用html2canvas实现 将dom元素截成图片

import html2canvas from "html2canvas";

// 获取屏幕缩放比例方法
getScreenScale(){
    var screenScale=1;
    var screen=window.screen;
    var ua=navigator.userAgent.toLowerCase();
    //设备像素比
    if(window.devicePixelRatio !== undefined){
        screenScale=window.devicePixelRatio;
    //IE11以下版本浏览器
    }else if(ua.indexOf('msie')>-1){
        if(screen.deviceXDPI && screen.logicalXDPI){
            screenScale=screen.deviceXDPI/screen.logicalXDPI;        
        }
    //浏览器自身缩放
    }else if(window.outerWidth !== undefined && window.innerWidth !== undefined){
        screenScale=window.outerWidth/window.innerWidth;
    }
    if(screenScale){
        screenScale=Math.round(screenScale*100)/100; 
    }
    return screenScale;
  },


 toImageBase64 (dom,name,w,h,) {
    // 手动创建一个 canvas 标签
    const canvas = document.createElement("canvas")
    //屏幕缩放比
    const screenScale = this.getScreenScale();
    //要截图的DOM元素
    let screenshotDom = dom;
    // 获取父级的宽高
    const width = parseInt(w||window.getComputedStyle(screenshotDom).width) * screenScale;
    const height = parseInt(h||window.getComputedStyle(screenshotDom).height) * screenScale;
    //画布缩放比例
    const baseScale = 2;
    //画布实际宽度
    canvas.width = width * baseScale;    
    //画布实际高度
    canvas.height = height * baseScale;
    //生成画笔
    const ctx = canvas.getContext("2d");
    //画布内容根据画布实际高度进行缩放（内容高度需要和实际高度一致）
    ctx.scale(  baseScale,  baseScale);   //根据画布在页面高度 * 缩放比例 = 画布实际高度
    

    //画布在页面上的宽度
    canvas.style.width = width  + 'px';
    //画布在页面上的高度
    canvas.style.height = height  + 'px';

    /**
     * 简单理解：
     * 把一张800*800的图片画到画布上    .
     * 画的内容也必须是800*800才能保证画布被全部占满
     * 然后再以400*400的尺寸，展示在页面中
     * 这两组数据用来调整canvas的清晰度
     * **/
    
    const config = {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true
    }
    return html2canvas(screenshotDom, config).then((can) => {
      let baseImg =  can.toDataURL("image/png");
      return baseImg
    })
  },

2、将base64转成文件

base64ToFile(data, name) {
        const binary = atob(data.split(',')[1]);
        const mime = data.split(',')[0].match(/:(.*?);/)[1];
        const array = [];
        for (let i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        const fileData = new Blob([new Uint8Array(array)], {
            type: mime,
        });
        const file = new File([fileData], `${name}.png`, {type: mime});
        
        return file
     },

这两个方法既可以分开使用也可以组合使用，比如截图之后需要传给后台，就需要将base64转成文件，这样好传一些