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

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

需要引入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}}

转载于:https://www.cnblogs.com/web-leader/p/9469400.html

解决ios下拍照自动旋转问题相关推荐

emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题
场景解决在移动端拍照,用 canvas 绘图出现图片逆时针旋转 90 度的问题. canvas 在高清屏与retina屏下绘图模糊的问题. 如下图: 就用我老婆来做模特了~ 下图是拍照过后渲染在画布 ...
emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题 1
场景解决在移动端拍照,用 canvas 绘图出现图片逆时针旋转 90 度的问题. canvas 在高清屏与retina屏下绘图模糊的问题. 如下图: 就用我老婆来做模特了~ 下图是拍照过后渲染在画布 ...
解决ios横屏拍照图片自动旋转90度问题
解决ios横屏拍照图片自动旋转90度问题参考文章: (1)解决ios横屏拍照图片自动旋转90度问题 (2)https://www.cnblogs.com/lanshengzhong/p/900856 ...
解决IOS下window.open页面打不开问题
解决IOS下window.open页面打不开问题参考文章: (1)解决IOS下window.open页面打不开问题 (2)https://www.cnblogs.com/tangjiao/p/102 ...
解决iOS下拉回弹方法二
原文地址:https://segmentfault.com/a/1190000007301527 一篇解决 iOS下拉回弹的文章分享给大家.加了些注释.并且应用在vue中.再次感谢原作者. <t ...
解决ios下的微信打开的页面背景音乐无法自动播放(转载)
20160314更新后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了微信/易信在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridge ...
解决ios下的微信页面背景音乐无法自动播放问题
前言在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,iOS下的safari是无法自动播放音乐的,以至一直以来形成了一种认知,iOS是无法自动播放媒体资源的.直到微信火爆 ...
html图片逆时针转换,HTML+CSS入门如何解决iOS下html上传图片被旋转问题
问题 iOS下,html方式使用上传图片,图片会被旋转.遇到这个问题js是无法解决的,html也没有相应的解决方案.只能放到后台去处理,将旋转的图片再旋转回来.iOS拍摄的图片提供了EXIF信息,Or ...
移动端上传照片预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）...
背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览需求二:然后绘制在canvas画布上这里,我们先看一个demo(http://jsfiddle.net/q ...

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

解决ios下拍照自动旋转问题相关推荐

最新文章

热门文章