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

实现：html2canvas + canvas.toDataURL

首先，引入依赖插件：

import { html2canvas } from './html2canvas';

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

opts配置：

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格式的图片功能

仓促记录，待完善和测试

html2canvas依赖

/*!

* html2canvas 1.0.0-alpha.12 <https://html2canvas.hertzen.com>

* Released under MIT License

1 import html2canvas from 'html2canvas/dist/html2canvas.min';
2 export { html2canvas };

 1 /*
 2  * @Author: guojufeng@ 
 3  * @Date: 2017-12-25 15:18:12
 4  * html2image模块
 5  * @param {object=} parameter 参数配置
 6  * @param {string} parameter.targetEleId: 目标元素id--要截屏的区域
 7  * @param {string} parameter.imgType: 要保留下来的图片格式：png|jpg|bmp|gif
 8  * @param {Boolean} toDown: 是否执行下载功能，不执行则返回图片base64地址
 9 */
10 import { html2canvas } from './html2canvas';
11 export let html2img = (parameter,toDown = true)=> {
12   const promise = new Promise((resolve,reject)=>{
13     if(parameter.imgType == 'png' || parameter.imgType == 'jpg' || parameter.imgType == 'bmp' || parameter.imgType == 'gif'){
14       let type = parameter.imgType;
15       /**
16       * 获取mimeType
17       * @param  {String} type the old mime-type
18       * @return the new mime-type
19       */
20       const _fixType = function(type) {
21           type = type.toLowerCase().replace(/jpg/i, 'jpeg');
22           let r = type.match(/png|jpeg|bmp|gif/)[0];
23           return 'image/' + r;
24       };
25       /*图片跨域及截图模糊处理*/
26       let shareContent = parameter.targetEleId,//需要截图的包裹的（原生的）DOM 对象
27           width = shareContent.clientWidth,//shareContent.offsetWidth; //获取dom 宽度
28           height = shareContent.clientHeight,//shareContent.offsetHeight; //获取dom 高度
29           canvas = document.createElement("canvas"), //创建一个canvas节点
30           scale = 4; //定义任意放大倍数 支持小数
31       canvas.width = width * scale; //定义canvas 宽度 * 缩放
32       canvas.height = height * scale; //定义canvas高度 *缩放
33       canvas.style.width = shareContent.clientWidth * scale + "px";
34       canvas.style.height = shareContent.clientHeight * scale + "px";
35       canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 
36       let opts = {
37           scale: scale, // 添加的scale 参数
38           canvas: canvas, //自定义 canvas
39           logging: false, //日志开关，便于查看html2canvas的内部执行流程
40           width: width, //dom 原始宽度
41           height: height,
42           useCORS: true // 【重要】开启跨域配置
43       };
44       html2canvas(shareContent,opts).then(function(canvas) {
45         let imgData = canvas.toDataURL(type)
46         let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
47         save_link.href = imgData.replace(_fixType(type),'image/octet-stream');
48         if(toDown){
49           let link_title = parameter.titleStr ? parameter.titleStr + '_' : 'easypass_';
50           save_link.download = link_title + (new Date()).getTime() + '.' + type;
51           let event = document.createEvent('MouseEvents');
52           event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
53           save_link.dispatchEvent(event);
54         }else{
55           resolve(save_link.href);
56         }
57       }); 
58     }else{
59       reject(new Error('parameter.imgType 类型错误，应该是字符串，且只有四种类型值。'));
60     }
61   });
62   return promise;
63 }