JS - 原生js实现 网页截图(+下载截图) 功能

import { html2canvas } from './html2canvas';

 1 /*图片跨域及截图模糊处理*/
 2 let canvasContent = document.getElementById('canvas'),//需要截图的包裹的（原生的）DOM 对象
 3     width = canvasContent.clientWidth,//canvasContent.offsetWidth || document.body.clientWidth; //获取dom 宽度
 4     height = canvasContent.clientHeight,//canvasContent.offsetHeight; //获取dom 高度
 5     canvas = document.createElement("canvas"), //创建一个canvas节点
 6     scale = 4; //定义任意放大倍数 支持小数
 7 canvas.width = width * scale; //定义canvas 宽度 * 缩放
 8 canvas.height = height * scale; //定义canvas高度 *缩放
 9 canvas.style.width = canvasContent.clientWidth * scale + "px";
10 canvas.style.height = canvasContent.clientHeight * scale + "px";
11 canvas.getContext("2d").scale(scale, scale); //获取context,设置scale

1 let opts = {
2     scale: scale, // 添加的scale 参数
3     canvas: canvas, //自定义 canvas
4     logging: false, //日志开关，便于查看html2canvas的内部执行流程
5     width: width, //dom 原始宽度
6     height: height,
7     useCORS: true // 【重要】开启跨域配置
8 };
9 //部分配置，其他另配

 1 let shareContent = document.getElementById('XXX');
 2 export let html = (type,toDown=false) =>{
 3   html2canvas(domContent,opts).then(function(canvas){
 4     let imgUrl =  canvas.toDataURL('image/' + type);
 5     if(toDown){
 6       window.location.href = imgUrl;
 7     }else{
 8       return imgUrl;
 9     }
10   });
11 }

1 html('jpg') //只获取base64后的jpg图片地址
2 html('png',true) //下载png格式的图片功能