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 > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步