-
Notifications
You must be signed in to change notification settings - Fork 12
/
img-compress.js
145 lines (134 loc) · 3.28 KB
/
img-compress.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
export default class ImgCompress {
constructor(pageContext) {
this.page = pageContext;
this.page.drawCanvas = this.drawCanvas.bind(this);
const systemInfo = wx.getSystemInfoSync();
this.pixelRatio = systemInfo.pixelRatio;
this.page.setData({ //构造画板宽高
canWidth: systemInfo.screenWidth,
canHeight: systemInfo.screenHeight
})
}
// 压缩
compress(src, aspectRatio = 0.5, quality = 0.5) {
return this.page.drawCanvas(src, aspectRatio, quality);
}
// 获取图片文件信息
getImageFileInfo(imgPath) {
let info = {};
return _.promise(wx.getImageInfo, {
src: imgPath
}).then(res => {
info.height = res.height;
info.width = res.width;
info.type = res.type;
info.path = res.path;
return _.promise(wx.getFileInfo, {
filePath: imgPath,
})
}).then(res => {
info.size = res.size;
return _.resolve(info);
})
}
// 绘制图片
drawCanvas(src, aspectRatio, quality){
const ctx = wx.createCanvasContext('compressCanvasId');
let that = this.page;
let imgInfo = {
result: 1, // 0 压缩失败,1未压缩, 2压缩成功
origin: {}, // 图片原始信息
compress: {}, // 图片压缩后的信息
};
return _.getImageFileInfo(src)
.then(res => {
imgInfo.origin = res;
let cW = res.width * aspectRatio;
let cH = res.height * aspectRatio;
let ratio = cW / cH;
// 当宽高大于画布宽高时,设置为画布宽高
if (cW > that.data.canWidth) {
cW = that.data.canWidth;
cH = cW / ratio;
}
if (cH > that.data.canHeight) {
cH = that.data.canHeight;
cW = cH * ratio;
}
return new Promise((resolve , reject) => {
//画出压缩图片
ctx.drawImage(src, 0, 0, cW, cH);
ctx.draw(false, __ => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: cW,
height: cH,
destWidth: cW,
destHeight: cH,
fileType: 'jpg',
quality,
canvasId: 'compressCanvasId',
fail: e => {
imgInfo.result = 0;
reject(imgInfo);
},
success: function success(res) {
imgInfo.result = 2;
resolve(res.tempFilePath);
},
});
});
})
}).then(res => {
return _.getImageFileInfo(res);
}).then(res => {
imgInfo.compress = res;
return _.resolve(imgInfo);
})
}
}
const _ = {
/**
* 重写微信的异步API,返回promise对象
*
* param fn:微信api; options:可选参数
*/
promise(fn, options) {
return new Promise((resolve, reject) => {
let params = {
success(res) {
resolve(res);
},
fail(res) {
reject(res);
},
complete(res) {
//...
}
}
if (options) {
params = Object.assign(params, options);
}
if (fn) {
fn(params);
}
})
},
/**
* 返回promise对象
*
* param s:回调参数
*/
resolve(s) {
return Promise.resolve(s);
},
/**
* 返回promise对象
*
* param j:回调参数
*/
reject(j){
return Promise.reject(j);
}
}