ios手機豎屏拍照圖片旋轉90°問題解決方法
手機拍照會給圖片添加一個Orientaion信息（即拍照方向），以下：html
用ios手機拍照，系統會給圖片加上一個方向的屬性， ios相機默認的拍照方向是後攝Home鍵在右爲正，前攝Home鍵在左爲正。前端
1表明正常的拍攝角度，ios橫屏下拍攝、安卓機不管橫屏豎屏拍攝，Orientaion的值都爲1；可是ios豎屏拍攝，Orientaion的值爲6，即豎着拍出的照片被添加了一個順時jquery
針旋轉90°的拍照方向，顯示的時候其實就是橫着拍的照片順時針旋轉90°而成。當咱們對拍出來的照片進行處理後，這個拍攝方向Orientaion信息就會丟失，顯示的效果android
天然回到橫屏狀態，看起來像是逆時針旋轉了90°。ios
實際上iOS手機豎着拍出的照片與橫着拍出的照片其本質上是同樣的，只不過豎着拍出的照片被添加了一個順時針旋轉90°的拍照方向，因此顯示的時候，就是橫着拍的照web
片順時針旋轉90°而成的，照片旋轉bug的緣由、其實就是當咱們在前端對圖片進行像素處理或者drawInRect等操做以後，照片ajax
的Orientaion信息，即爲拍照方向信息被刪除了，因此iOS手機豎着拍的照片又回到了橫着的狀態，看起來也就是逆時針旋轉了90°！canvas
html服務器
<!doctype html>app
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>前端解決ios手機豎拍上傳圖片旋轉90° 完美適配：Android/ios/Windows</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/exif.js"></script>
<script src="js/uploadImage.js"></script>
<script src="js/tech.js"></script>
</head>
<body>
<div class="featfile">
<div class="featimage featupfile phoneclick" id="imgcontainer">
<img src="" class="fileimg" id="fileimg">
<!--canvas 爲後文引用-->
<canvas id="Drawborder"></canvas>
</div>
<!-- multiple="multiple" 是爲了input能直接支持 Formdata 上傳圖片到後臺 後文有述 -->
<input type=file name="image" multiple="multiple" class="imgfilebtn" accept="image/jpeg,image/png,image/gif,image/jpg" onchange="selectFileImage(this)">
</div>
</body>
</html>
js
function selectFileImage(fileObj) {
var file = fileObj.files['0'];
var Orientation = null;
$('.loading_bg').fadeIn();
if (file) {
console.log("正在上傳,請稍後...");
var rFilter = /^(image\/jpeg|image\/png)$/i; // 檢查圖片格式
if (!rFilter.test(file.type)) {
//showMyTips("請選擇jpeg、png格式的圖片", false);
return;
}
// var URL = URL || webkitURL;
//獲取照片方向角屬性，用戶旋轉控制
EXIF.getData(file, function() {
// alert(EXIF.pretty(this));
EXIF.getAllTags(this);
//alert(EXIF.getTag(this, 'Orientation'));
Orientation = EXIF.getTag(this, 'Orientation');
//return;
});
var oReader = new FileReader();
oReader.onload = function(e) {
//var blob = URL.createObjectURL(file);
//_compress(blob, file, basePath);
var image = new Image();
image.src = e.target.result;
image.onload = function() {
var expectWidth = this.naturalWidth;
var expectHeight = this.naturalHeight;
if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
expectWidth = 800;
expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
} else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
expectHeight = 1200;
expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
}
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = expectWidth;
canvas.height = expectHeight;
ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
var u = navigator.userAgent;
//修復ios
if (u.match(/iphone/i)) {
console.log('iphone');
//若是方向角不爲1，都須要進行旋轉 added by lzk
if(Orientation != "" && Orientation != 1){
console.log('旋轉處理');
switch(Orientation){
case 6://須要順時針（向左）90度旋轉
console.log('須要順時針（向左）90度旋轉');
rotateImg(this,'left',canvas);
break;
case 8://須要逆時針（向右）90度旋轉
console.log('須要逆時針（向右）90度旋轉');
rotateImg(this,'right',canvas);
break;
case 3://須要180度旋轉
console.log('須要180度旋轉');
rotateImg(this,'right',canvas);//轉兩次
rotateImg(this,'right',canvas);
break;
}
}
//base64 在外定義爲全局變量
//下面base64爲獲得旋轉後的base64圖片
base64 = canvas.toDataURL("image/jpeg", 0.8);
var type = 'jpeg';
var fixtype = function (type) {
type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
base64 = base64.replace(fixtype(type), 'image/jpeg');
// saveFile(base64, '111') 此處是若是想要保存當前圖片到本地的話;
//這裏是把已經旋轉過的圖片路徑賦值到img中
$(".fileimg").attr("src", base64);
}
else if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {// android能夠直接不變
$(".fileimg").attr("src", e.target.result);
//若是安卓收到ios拍攝的照片，能夠按PC端方式判斷
}
else{
//修復PC端上上傳ios拍出來的圖片
if(Orientation != "" && Orientation != 1){
//alert('旋轉處理');
switch(Orientation){
case 6://須要順時針（向左）90度旋轉
console.log('須要順時針（向左）90度旋轉');
rotateImg(this,'left',canvas);
break;
case 8://須要逆時針（向右）90度旋轉
console.log('須要逆時針（向右）90度旋轉');
rotateImg(this,'right',canvas);
break;
case 3://須要180度旋轉
console.log('須要180度旋轉');
rotateImg(this,'right',canvas);//轉兩次
rotateImg(this,'right',canvas);
break;
}
}
base64 = canvas.toDataURL("image/jpeg", 0.8);
var type = 'jpeg';
var fixtype = function (type) {
type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
base64 = base64.replace(fixtype(type), 'image/jpeg');
// saveFile(base64, '111');
$(".fileimg").attr("src", base64);
}
};
};
oReader.readAsDataURL(file);
}
}
//將圖片保存到本地
var saveFile = function (data, filename) {
var link = document.createElement('a');
link.href = data;
link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
}
//對圖片旋轉處理 added by lzk
function rotateImg(img, direction,canvas) {
//alert(img);
//最小與最大旋轉方向，圖片旋轉4次後回到原方向
var min_step = 0;
var max_step = 3;
//var img = document.getElementById(pid);
if (img == null)return;
//img的高度和寬度不能在img元素隱藏後獲取，不然會出錯
var height = img.height;
var width = img.width;
//var step = img.getAttribute('step');
var step = 2;
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
//旋轉到原位置，即超過最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//旋轉角度以弧度值爲參數
var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
}
下面講述一下如何用ajax傳輸base64圖片,不須要表單，直接使用input就能夠完成
上文html中有述， 在input中添加multiple="multiple"屬性便可
//此函數是爲了轉化base64的值，用於傳給後臺
function convertBase64Url(urlData){
//獲取canvas中的圖片信息
//window.atob方法將其中的base64格式的圖片轉換成二進制字符串；若將轉換後的值直接賦值給Blob會報錯，需Uint8Array轉換：最後建立Blob對象；
var _data = window.atob(data.split(",")[1]);
//若是不用ArrayBuffer,發送給服務器的圖片格式是[object Uint8Array],上傳失敗...
var buffer = new ArrayBuffer(_data.length);
var _buffer = new Uint8Array(buffer);
for(var i = 0; i < _data.length; i++) {
_buffer[i] = _data.charCodeAt(i);
}
var blob;
var Builder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;;
if(Builder) {
var builder = new Builder();
builder.append(_buffer);
blob = builder.getBlob('image/jpeg');
} else {
blob = new window.Blob([_buffer], {
type: 'image/jpeg'
});
}
return blob;}
//到這裏就能實現與後臺的交互了
var base64 = null;
$('.button').click(function(){
var formDate = new FormData();
formDate.append('image', convertBase64Url(base64));
$.ajax({
beforeSend: function (xhr) {
},
type: 'POST',
url: url,
data: formDate,
contentType: false,
processData: false,
success: function(data){
//成功回調
},
error: function (data) {
//失敗返回
}
})
})
- 1. ios手機上傳豎拍照片旋轉90度問題
- 2. 利用exif.js解決ios手機上傳豎拍照片旋轉90度問題
- 3. 解決ios手機上傳豎拍照片旋轉90度的問題
- 4. iOS開發-拍照上傳圖片旋轉90度問題的解決方案
- 5. ios 豎着拍照導致圖片旋轉問題
- 6. vue 上傳圖片視頻組件，可拍照選擇照片，解決蘋果手機拍照旋轉問題
- 7. android 選擇圖片或拍照時旋轉了90度問題
- 8. 解決android有的手機拍照後上傳圖片被旋轉的問題
- 9. Android解決部分手機拍照照片自動旋轉的問題
- 10. iOS開發屏幕旋轉鎖定橫豎屏解決方法
- 更多相關文章...
- • Redis悲觀鎖解決高併發搶紅包的問題 - 紅包項目實戰
- • Redis樂觀鎖解決高併發搶紅包的問題 - 紅包項目實戰
- • PHP Ajax 跨域問題最佳解決方案
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。