实现: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>
* Copyright (c) 2018 Niklas von Hertzen <https://hertzen.com>
* Released under MIT License
*/
1 import html2canvas from 'html2canvas/dist/html2canvas.min';
2 export { html2canvas };
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
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 }
html2img源码