分享程序员开发的那些事...
更新时间：2022-02-14 21:18:57
实现：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依赖
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 }