|
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
<template> <div> <input type="file" id="upload" accept="image" @change="upload" /> </div></template><script>export default { data() { return { picValue:{}, headerImage:'' }; }, components: {}, methods: { upload(e) { console.log(e); let files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.picValue = files[0]; this.imgPreview(this.picValue); }, imgPreview(file) { let self = this; let Orientation; //去獲取拍照時(shí)的信息，解決拍出來的照片旋轉(zhuǎn)問題 self.Exif.getData(file, function() { Orientation = self.Exif.getTag(this, 'Orientation'); }); // 看支持不支持FileReader if (!file || !window.FileReader) return; if (/^image/.test(file.type)) { // 創(chuàng)建一個(gè)reader let reader = new FileReader(); // 將圖片2將轉(zhuǎn)成 base64 格式 reader.readAsDataURL(file); // 讀取成功后的回調(diào) reader.onloadend = function() { let result = this.result; let img = new Image(); img.src = result; //判斷圖片是否大于100K,是就直接上傳，反之壓縮圖片 if (this.result.length <= 100 * 1024) { self.headerImage = this.result; self.postImg(); } else { img.onload = function() { let data = self.compress(img, Orientation); self.headerImage = data; self.postImg(); }; } }; } }, compress(img, Orientation) { let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); //瓦片canvas let tCanvas = document.createElement('canvas'); let tctx = tCanvas.getContext('2d'); let initSize = img.src.length; let width = img.width; let height = img.height; //如果圖片大于四百萬像素，計(jì)算壓縮比并將大小壓至400萬以下 let ratio; if ((ratio = (width * height) / 4000000) > 1) { console.log('大于400萬像素'); ratio = Math.sqrt(ratio); width /= ratio; height /= ratio; } else { ratio = 1; } canvas.width = width; canvas.height = height; // 鋪底色 ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, canvas.width, canvas.height); //如果圖片像素大于100萬則使用瓦片繪制 let count; if ((count = (width * height) / 1000000) > 1) { console.log('超過100W像素'); count = ~~(Math.sqrt(count) + 1); //計(jì)算要分成多少塊瓦片 // 計(jì)算每塊瓦片的寬和高 let nw = ~~(width / count); let nh = ~~(height / count); tCanvas.width = nw; tCanvas.height = nh; for (let i = 0; i < count; i++) { for (let j = 0; j < count; j++) { tctx.drawImage( img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh ); ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh); } } } else { ctx.drawImage(img, 0, 0, width, height); } //修復(fù)ios上傳圖片的時(shí)候 被旋轉(zhuǎn)的問題 if (Orientation != '' && Orientation != 1) { switch (Orientation) { case 6: //需要順時(shí)針（向左）90度旋轉(zhuǎn) this.rotateImg(img, 'left', canvas); break; case 8: //需要逆時(shí)針（向右）90度旋轉(zhuǎn) this.rotateImg(img, 'right', canvas); break; case 3: //需要180度旋轉(zhuǎn) this.rotateImg(img, 'right', canvas); //轉(zhuǎn)兩次 this.rotateImg(img, 'right', canvas); break; } } //進(jìn)行最小壓縮 let ndata = canvas.toDataURL('image/jpeg', 0.1); tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0; return ndata; }, rotateImg(img, direction, canvas) { //最小與最大旋轉(zhuǎn)方向，圖片旋轉(zhuǎn)4次后回到原方向 const min_step = 0; const max_step = 3; if (img == null) return; //img的高度和寬度不能在img元素隱藏后獲取，否則會(huì)出錯(cuò) let height = img.height; let width = img.width; let step = 2; if (step == null) { step = min_step; } if (direction == 'right') { step++; //旋轉(zhuǎn)到原位置，即超過最大值 step > max_step && (step = min_step); } else { step--; step < min_step && (step = max_step); } //旋轉(zhuǎn)角度以弧度值為參數(shù) let degree = (step * 90 * Math.PI) / 180; let ctx = canvas.getContext('2d'); switch (step) { case 0: canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0); break; case 1: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, 0, -height); break; case 2: canvas.width = width; canvas.height = height; ctx.rotate(degree); ctx.drawImage(img, -width, -height); break; case 3: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, -width, 0); break; } }, postImg() { //這里寫接口 //打印的圖片base64 console.log('this.headerImage',this.headerImage); //接口 axios } }};</script> |
要先運(yùn)行
|
1
|
npm install exif-js --save |
然后在main.js中添加
|
1
2
3
|
import Exif from 'exif-js'Vue.use(Exif)Vue.prototype.Exif = Exif |
以上就是vue使用exif獲取圖片旋轉(zhuǎn)，壓縮的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于vue 圖片旋轉(zhuǎn)，壓縮的資料請關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://www.cnblogs.com/maruihua/p/12090196.html
