首页 > 编程语言 > vue使用exif获取图片旋转，压缩的示例代码
2020
12-14

vue使用exif获取图片旋转，压缩的示例代码

?
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 图片旋转，压缩的资料请关注自学编程网其它相关文章！

编程技巧