|
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; //去獲取拍照時的信息，解決拍出來的照片旋轉問題 self.Exif.getData(file, function() { Orientation = self.Exif.getTag(this, 'Orientation'); }); // 看支持不支持FileReader if (!file || !window.FileReader) return; if (/^image/.test(file.type)) { // 創建一個reader let reader = new FileReader(); // 將圖片2將轉成 base64 格式 reader.readAsDataURL(file); // 讀取成功后的回調 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; //如果圖片大于四百萬像素，計算壓縮比并將大小壓至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); //計算要分成多少塊瓦片 // 計算每塊瓦片的寬和高 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); } //修復ios上傳圖片的時候 被旋轉的問題 if (Orientation != '' && Orientation != 1) { switch (Orientation) { case 6: //需要順時針（向左）90度旋轉 this.rotateImg(img, 'left', canvas); break; case 8: //需要逆時針（向右）90度旋轉 this.rotateImg(img, 'right', canvas); break; case 3: //需要180度旋轉 this.rotateImg(img, 'right', canvas); //轉兩次 this.rotateImg(img, 'right', canvas); break; } } //進行最小壓縮 let ndata = canvas.toDataURL('image/jpeg', 0.1); tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0; return ndata; }, rotateImg(img, direction, canvas) { //最小與最大旋轉方向，圖片旋轉4次后回到原方向 const min_step = 0; const max_step = 3; if (img == null) return; //img的高度和寬度不能在img元素隱藏后獲取，否則會出錯 let height = img.height; let width = img.width; let step = 2; if (step == null) { step = min_step; } if (direction == 'right') { step++; //旋轉到原位置，即超過最大值 step > max_step && (step = min_step); } else { step--; step < min_step && (step = max_step); } //旋轉角度以弧度值為參數 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> |
要先運行
|
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獲取圖片旋轉，壓縮的示例代碼的詳細內容，更多關于vue 圖片旋轉，壓縮的資料請關注服務器之家其它相關文章！
原文鏈接：https://www.cnblogs.com/maruihua/p/12090196.html
