1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 解决ios下拍照自动旋转问题

解决ios下拍照自动旋转问题

时间:2020-12-27 19:12:48

相关推荐

解决ios下拍照自动旋转问题

<input class="sr-only" id="inputImage" name="file" type="file" accept="image/*" οnchange="getFile()"> 上传照片

<canvas id="canvas" style="height: 0px"></canvas>

需要引入EXIF.js

function getFile() {// alert(1111);let _this = thislet img = document.getElementById('image')let file = document.getElementById('inputImage').files[0]let reader = new FileReader()_this.finish = 1EXIF.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.resultsessionStorage.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.84\sMobile\sSafari\/537\.36\sMicroMessenger|57\.0\.2987\.132\sMQQBrowser/i)) {if (orientation != '' && orientation != undefined && orientation != 1) {switch (orientation) {case 6: // 需要顺时针(向左)90度旋转canvas.width = image.heightcanvas.height = image.widthctx.rotate(90 * Math.PI / 180)ctx.drawImage(this, 0, -image.height)breakcase 8: // 需要逆时针(向右)90度旋转canvas.width = image.heightcanvas.height = image.widthctx.rotate(270 * Math.PI / 180)ctx.drawImage(this, -image.width, 0)breakcase 3: // 需要180度旋转canvas.width = image.widthcanvas.height = image.heightctx.rotate(180 * Math.PI / 180)ctx.drawImage(this, -image.width, -image.height)break}} else {canvas.width = image.widthcanvas.height = image.heightctx.drawImage(this, 0, 0, image.width, image.height)}} else {canvas.width = image.widthcanvas.height = image.heightctx.drawImage(this, 0, 0, image.width, image.height)}// Indicator.close()_this.imgsrc = canvas.toDataURL()_this.finish = 0}image.onerror = function () {_this.finish = 0Toast({message: '图片上传错误,请重试', duration: 1500})}}, false)})if (file) {reader.readAsDataURL(file)} else {// Indicator.close()_this.finish = 0}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。