<input class="sr-only" id="inputImage" name="file" type="file" accept="image/*" onchange="getFile()"> 上传照片
<canvas id="canvas" style="height: 0px"></canvas>
需要引入EXIF.js
function getFile() { // alert(1111); let _this = this let img = document.getElementById('image') let file = document.getElementById('inputImage').files[0] let reader = new FileReader() _this.finish = 1 EXIF.getData(file, function () { console.log(1111); let orientation = EXIF.getTag(this, 'Orientation') console.log(orientation); reader.addEventListener('load', function () { console.log(1111); let image = new Image() image.src = reader.result sessionStorage.setItem('imgBase', reader.result); console.log(reader.result); let canvas = document.getElementById('canvas') // 处理位置不对的图片 let ctx = canvas.getContext('2d') image.onload = function () { if (navigator.userAgent.match(/iphone|ipod|ipad|62.0.3202.84sMobilesSafari/537.36sMicroMessenger|57.0.2987.132sMQQBrowser/i)) { if (orientation != '' && orientation != undefined && orientation != 1) { switch (orientation) { case 6: // 需要顺时针(向左)90度旋转 canvas.width = image.height canvas.height = image.width ctx.rotate(90 * Math.PI / 180) ctx.drawImage(this, 0, -image.height) break case 8: // 需要逆时针(向右)90度旋转 canvas.width = image.height canvas.height = image.width ctx.rotate(270 * Math.PI / 180) ctx.drawImage(this, -image.width, 0) break case 3: // 需要180度旋转 canvas.width = image.width canvas.height = image.height ctx.rotate(180 * Math.PI / 180) ctx.drawImage(this, -image.width, -image.height) break } } else { canvas.width = image.width canvas.height = image.height ctx.drawImage(this, 0, 0, image.width, image.height) } } else { canvas.width = image.width canvas.height = image.height ctx.drawImage(this, 0, 0, image.width, image.height) } // Indicator.close() _this.imgsrc = canvas.toDataURL() _this.finish = 0 } image.onerror = function () { _this.finish = 0 Toast({message: '图片上传错误,请重试', duration: 1500}) } }, false) }) if (file) { reader.readAsDataURL(file) } else { // Indicator.close() _this.finish = 0 } }