手机拍照上传图片旋转角度问题

解决上传图片自动旋转问题
苹果手机和部分安卓手机上传图片时会发生旋转，解决问题的思路是：先获取旋转角度，再对图片旋转进行修正
1、获取旋转角度

旋转角度	参数
0度	1
顺时针90度	6
逆时针90度	8
180度	3

方式一、exif可以获取图片的信息可利用exif获取旋转角度，地址：http://code.ciaoca.com/javascript/exif-js/此方式会有偶尔获取不到图片信息的bug，

EXIF.getData(document.getElementById('imgElement'), function(){EXIF.getAllTags(this);Orientation=EXIF.getTag(this, 'Orientation');//图像的旋转角度参数
});

方式二、此方式暂时未发现有审么bug

getOrientation = function(file, callback) {var reader = new window.FileReader();reader.onload = function(e) {var view = new window.DataView(e.target.result);if (view.getUint16(0, false) != 0xFFD8) {return callback(-2);}var length = view.byteLength,offset = 2;while (offset < length) {var marker = view.getUint16(offset, false);offset += 2;if (marker == 0xFFE1) {if (view.getUint32(offset += 2, false) != 0x45786966) {return callback(-1);}var little = view.getUint16(offset += 6, false) == 0x4949;offset += view.getUint32(offset + 4, little);var tags = view.getUint16(offset, little);offset += 2;for (var i = 0; i < tags; i++) {if (view.getUint16(offset + (i * 12), little) == 0x0112) {return callback(view.getUint16(offset + (i * 12) + 8, little));}}} else if ((marker & 0xFF00) != 0xFF00) {break;} else {offset += view.getUint16(offset, false);}}return callback(-1);};reader.readAsArrayBuffer(file);
}

使用getOrientation

 getOrientation(file, function(Orientation) {Orientation//此为旋转角度参数})

2、旋转修正
如果使用了megapix-image.js插件对图片进行压缩了，即可直接使用插件的旋转，也可使用其它方式对图片旋转

function compressImg(imgData, Orientation, onCompress) {if (!imgData) return;var pictype = imgData.match(/image\/\w+/);onCompress = onCompress || function() {};var canvas = document.createElement('canvas');var img = new Image();img.onload = function() {var ctx = canvas.getContext("2d");var mpImg = new MegaPixImage(img);mpImg.render(canvas, {maxWidth: 300,maxHeight: 400,quality: 1,orientation: Orientation//旋转角度参数});onCompress(canvas.toDataURL(pictype[0])); };img.src = imgData;
}

手机拍照上传图片旋转角度问题相关推荐

移动端h5实现手机拍照上传图片，相册选择上传图片input type=file
移动端h5实现手机拍照上传图片,相册选择上传图片input type=file 有不足或者不对的在下方留言,有不明白的也请在下方留言,虽然我不一定能看到,话不多说上代码,注释都写好了 <!doc ...
兼容Android11的手机拍照上传图片和相册选择图片功能(可直接用)
//需要的权限数组读/写/相机 private static String[] PERMISSIONS_STORAGE = {android.Manifest.permission.READ_EXT ...
原生js调用手机拍照功能
原生js调用手机拍照功能此功能主要用于混合App开发时手机拍照上传图片的功能! 话不多说直接上代码! 注:此代码在浏览器中运行时会报错,必须打开调试功能在手机上运行才可以! // html部分 // ...
前端解决手机拍照旋转问题及图片压缩上传
1.依赖 jquery.js 2.html部分 <input class="addImage" name="loadFile" type="f ...
android上传图片被旋转,解决android有的手机拍照后上传图片被旋转的问题
需求:做仿新浪发微博的项目,能够上传图片还有两外一个项目用到手机拍摄图片,这两个都需要把图片上传到服务器遇到问题:有的手机拍摄的图片旋转90度,有的图片旋转了180度,有的手机是正常的,服务器要求的 ...
html手机上传图片去除拍照,HTML5手机拍照上传
首先需要在页面添加HTML5控件 capture="camera" 这样就可以在android5.0 或则 IOS 9.0 以上直接拉起照相机,但是这些版本之下的手机只能调用相册选 ...
解决android有的手机拍照后上传图片被旋转的问题
需求:做仿新浪发微博的项目,能够上传图片还有两外一个项目用到手机拍摄图片,这两个都需要把图片上传到服务器遇到问题:有的手机拍摄的图片旋转90度,有的图片旋转了180度,有的手机是正常的,服务器要求的 ...
Android进阶之路 - 解决部分手机拍照之后图片被旋转的问题
这几天犯了一个错误,初期想着甩锅给后台的- 但还好及时发现了是自身的问题~ 关联文章 Android基础进阶 - 调用拍照.获取图片(基础) Android基础进阶 - 获取.调用相册内图片(基础) ...
移动端手机h5上传图片旋转90度
移动端手机h5上传图片会旋转90度的问题 h5页面调用相机正常情况下都是正常的,但是有些手机横着照相的时候就会正常的,iphone正确的拍照方式是横屏的,而用户往往是竖屏拍照上传的,就相当于照相机反转 ...

手机拍照上传图片旋转角度问题

手机拍照上传图片旋转角度问题相关推荐

最新文章

热门文章