iphone的Safari浏览器中HTML5上传图片方向问题解决方法

前段时间在上传图片的时候前端使用FileReader将图片读到内存，使用canvas进行压缩，然后上传，在安卓手机上没有问题，但是在iphone的Safari浏览器中一直存在图片方向不正的问题，经过多方面检查才明白，原因可以查看此处：图片方向有误的原因。

接下来来说解决方案：

首先可以使用GitHub上的exif.js （exif.js的翻译）来读取图片的Orientation 元数据，在根据下面这张图进行方向调整就OK了：

下面主要把代码处理的关键位置展示出来，很多其他限制需要自行解决：

$("#uploaderInput").on("change", function (e) {var files = e.target.files,canvasTemp = $("#canvasTemp")[0];for (var i = 0, len = files.length; i < len; i++) {var file = files[i];EXIF.getData(file, function (file) {var _this = this,orientation = EXIF.getTag(_this, 'Orientation'),reader = new FileReader();reader.readAsDataURL(_this);reader.onload = function () {var imgTemp = new Image();imgTemp.src = this.result;imgTemp.onload = function () {var thisImg = this;var ctx = canvasTemp.getContext("2d");var degree = 0,drawWidth = sWidth,  // sWidth图片宽度canvasWidth = sWidth,drawHeight = sHeight, // sWidth图片高度canvasHeight = sHeight;if (orientation) {//判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式switch (orientation) {//iphone横屏拍摄，此时home键在左侧case 3:degree = 180;drawWidth = -sWidth;drawHeight = -sHeight;break;//iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)case 6:canvasWidth = sHeight;canvasHeight = sWidth;degree = 90;drawWidth = sWidth;drawHeight = -sHeight;break;//iphone竖屏拍摄，此时home键在上方case 8:canvasWidth = sHeight;canvasHeight = sWidth;degree = 270;drawWidth = -sWidth;drawHeight = sHeight;break;}}// canvas清屏  ctx.clearRect(0, 0, canvasTemp.width, canvasTemp.height);// 重置canvas宽高  canvasTemp.width = canvasWidth;canvasTemp.height = canvasHeight;//使用canvas旋转校正ctx.rotate(degree * Math.PI / 180);ctx.fillStyle = '#ffffff';ctx.fillRect(0, 0, drawWidth, drawHeight);ctx.drawImage(thisImg, 0, 0, drawWidth, drawHeight);// 如果是jpeg/webp图片，可设置图片质量，png图片不能设置质量var quantity = thisImg.src.length > (1024 * 1024) ? 0.8 : 1.0;// 导出图片的base64var dataUrl = canvasTemp.toDataURL('image/jpeg', quantity);// 在页面中直接用此处导出的base64填充图片的src，并且上传的时候上传base64格式，或者是将base64转成Blob上传// base64转Blob// function dataURLtoBlob(base64Data) {//     var parts = base64Data.split(';base64,');//     var contentType = parts[0].split(':')[1];//     var raw = window.atob(parts[1]);//     var rawLength = raw.length;//     var uInt8Array = new Uint8Array(rawLength);//     for (var i = 0; i < rawLength; ++i) {//         uInt8Array[i] = raw.charCodeAt(i);//     }//     return new Blob([uInt8Array], { type: contentType });// }}}});}
});

实际上是iphone或者是支持带方向传感器的数码相机拍出来的照片都会带有Orientation 方向元数据，所以不管是在PC端还是移动端，都是需要加上面这段代码进行图片翻转的。

iphone的Safari浏览器中HTML5上传图片方向问题解决方法相关推荐

ios html5 exif,IOS中html5上传图片方向问题解决方法
// @param {string} img 图片的base64 // @param {int} dir exif获取的方向信息 // @param {function} next 回调方法,返回校正 ...
上传图片方向不对 php,如何解决IOS中html5上传图片方向问题？
这篇文章主要介绍了IOS中html5上传图片方向问题解决方法的相关资料,需要的朋友可以参考下用html5编写图片裁切上传,在iphone手机上可能会遇到图片方向错误问题,在此把解决方法和大家分享一下 ...
chrome 浏览器中罗技鼠标滚轮失灵问题解决方法
chrome 浏览器中罗技鼠标滚轮失灵问题解决方法参考文章: (1)chrome 浏览器中罗技鼠标滚轮失灵问题解决方法 (2)https://www.cnblogs.com/fanyfan/p/11 ...
iphone的safari浏览器中实现全屏浏览的方法
正常情况下,当你用手机浏览器打开网页时,导航就停留在上面,这样实际展示的屏幕就变小了. 那能不能加载后,屏幕就自动全屏呢?这就是本文要讨论的. Add to Home Screen 说到全屏不得不谈i ...
无法在 Safari 浏览器中打开网站如何解决？
无法打开网页.Safari浏览器找不到服务器?相信很多人都有遇到过这样的情况,下面我们来分享无法在 Safari 浏览器中打开网站的解决方法. 1.检查页面无法打开时出现的信息.这可能会建议解决问题的 ...
html5 safari浏览器全屏显示隐藏工具条,HTML5全屏API不IPhone SE Safari浏览器工作，也...
我想打一个div容器全屏等最新的iPhone,它在所有桌面浏览器和Android浏览器,但在iPhone浏览器(Safari浏览器)工作正常,它不管用.HTML5全屏API不IPhone SE Saf ...
怎样在iPhone、iPad上的Safari浏览器中快速关闭所有标签页？
Safari 是 iPhone 上使用最广泛的网络浏览器,可以在 iPhone 和 iPad 上的 Safari 中轻松打开额外的标签页,也可以一次关闭所有标签页.如何快速做到这一点,而不必一一关闭它 ...
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题的解决方法
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题的解决方法参考文章: (1)JS IOS/iPhone的Safari浏览器不兼容Javascript中的D ...
html5返回上一页不刷新,javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题...
我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...

iphone的Safari浏览器中HTML5上传图片方向问题解决方法

iphone的Safari浏览器中HTML5上传图片方向问题解决方法相关推荐

最新文章

热门文章