A JavaScript library for reading EXIF meta data from image files.

 

exif-js/exif-js: JavaScript library for reading EXIF image metadata https://github.com/exif-js/exif-js

 

exif-js - npm https://www.npmjs.com/package/exif-js

 

 

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>EXIF example with inline EXIF info</title>
</head>
<body>

    <img src="DSCN0614_small.jpg" id="img1" />
    <pre>Make and model: <span id="makeAndModel"></span></div>
    <br/>

    <img src="Bush-dog.jpg" id="img2" />
    <pre id="allMetaDataSpan"></pre>
    <br/>

    <img src="Bloated-Hero.jpg" id="img3" /><br/>
    <pre id="img3WithXmpMetaData"></pre>

    <script type="text/javascript" src="../exif.js"></script>
    <script>
        "use strict";
        window.onload=getExif;

        function getExif() {
            var img1 = document.getElementById("img1");
            EXIF.getData(img1, function() {
                var make = EXIF.getTag(this, "Make");
                var model = EXIF.getTag(this, "Model");
                var makeAndModel = document.getElementById("makeAndModel");
                makeAndModel.innerHTML = `${make} ${model}`;
            });

            var img2 = document.getElementById("img2");
            EXIF.getData(img2, function() {
                var allMetaData = EXIF.getAllTags(this);
                var allMetaDataSpan = document.getElementById("allMetaDataSpan");
                allMetaDataSpan.innerHTML = JSON.stringify(allMetaData, null, "\t");
            });

            var img3 = document.getElementById("img3");
            // EXIF.enableXmp();
            EXIF.getData(img3, function() {
                var allMetaData = EXIF.getAllTags(this);
                var img3WithXmpMetaData = document.getElementById("img3WithXmpMetaData");
                img3WithXmpMetaData.innerHTML = JSON.stringify(allMetaData, null, "\t");
            });
        }
    </script>
</body>
</html>
复制代码

 

 

vue2移动端上传,预览,压缩图片,解决拍照旋转问题 - CSDN博客 https://blog.csdn.net/xiaogezl/article/details/70156500

 

因为最近遇到个移动端上传头像的需求,上传到后台的数据是base64位,其中为了提高用户体验,把比较大的图片用canvas进行压缩之后再进行上传。在移动端调用拍照功能时,会发生图片旋转,为了解决这个问题引入了exif去判断拍照时的信息再去处理图片,这是个很好的插件。关于exif.js可以去他的GitHub上了解,这边直接npm install exif-js --save   安装,然后import一下就可以使用了。以下就是源码,可以直接使用。

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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<template>
  <div>
    <div style="padding:20px;">
      <div class="show">
        <div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div>
      </div>
      <div style="margin-top:20px;">
        <input type="file" id="upload" accept="image" @change="upload">
        <label for="upload"></label>
      </div>
    </div>
  </div>
</template>
  
<script>
import Exif from 'exif-js'
  
export default {
  data () {
    return {
      headerImage:'',picValue:''
    }
  },
  mounted () {
  },
  methods: {
    upload (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;
      //去获取拍照时的信息,解决拍出来的照片旋转问题
      Exif.getData(file, function(){
          Orientation = 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();
              }
            }
          }
        }
      },
      postImg () {
        //这里写接口
      },
      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;
        }   
    },
    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);
      console.log('压缩前:' + initSize);
      console.log('压缩后:' + ndata.length);
      console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
      return ndata;
    },
  }
}
</script>
  
<style>
*{
  margin: 0;
  padding: 0;
}
.show {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  border: 1px solid #d5d5d5;
}
.picture {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

  

 

posted @   papering  阅读(284)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示