exif.js
HTML5+canvas進行移動端手機照片上傳時，發現iOS手機上傳豎拍照片會逆時針旋轉90度，橫拍照片無此問題；Android手機沒這個問題。javascript
所以解決這個問題的思路是：獲取到照片拍攝的方向角，對非橫拍的ios照片進行角度旋轉修正。html
利用exif.js讀取照片的拍攝信息，這裏主要用到Orientation屬性。
html5
Orientation屬性說明以下：
java
下面就直接上代碼了。jquery
主要有html5頁面和一個js，示例功能包含了圖片壓縮和旋轉。android
本身寫的是uploadImage.js。ios
html5測試頁面以下：web
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<meta name=
"viewport"
content=
"initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>圖片上傳</title>
<script type=
"text/javascript"
src=
"js/jquery-1.8.3.js"
></script>
<script type=
"text/javascript"
src=
"js/uploadPicture/uploadImage.js"
></script>
<script type=
"text/javascript"
src=
"js/exif.js"
></script>
<script>
</script>
</head>
<body>
<div style=
"height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;"
>
上傳圖片:
<input type=
"file"
accept=
"image/*"
id=
"uploadImage"
capture=
"camera"
onchange=
"selectFileImage(this);"
/>
</div>
<div style=
"margin-top: 10px;"
>
<img alt=
"preview"
src=
""
id=
"myImage"
/>
</div>
</body>
</html>
uploadImage.js以下：
function
selectFileImage(fileObj) {
var
file = fileObj.files[
'0'
];
//圖片方向角 added by lzk
var
Orientation =
null
;
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
base64 =
null
;
//修復ios
if
(navigator.userAgent.match(/iphone/i)) {
console.log(
'iphone'
);
//alert(expectWidth + ',' + expectHeight);
//若是方向角不爲1，都須要進行旋轉 added by lzk
if
(Orientation !=
""
&& Orientation != 1){
alert(
'旋轉處理'
);
switch
(Orientation){
case
6:
//須要順時針（向左）90度旋轉
alert(
'須要順時針（向左）90度旋轉'
);
rotateImg(
this
,
'left'
,canvas);
break
;
case
8:
//須要逆時針（向右）90度旋轉
alert(
'須要順時針（向右）90度旋轉'
);
rotateImg(
this
,
'right'
,canvas);
break
;
case
3:
//須要180度旋轉
alert(
'須要180度旋轉'
);
rotateImg(
this
,
'right'
,canvas);
//轉兩次
rotateImg(
this
,
'right'
,canvas);
break
;
}
}
/*var mpImg = new MegaPixImage(image);
mpImg.render(canvas, {
maxWidth: 800,
maxHeight: 1200,
quality: 0.8,
orientation: 8
});*/
base64 = canvas.toDataURL(
"image/jpeg"
, 0.8);
}
else
if
(navigator.userAgent.match(/Android/i)) {
// 修復android
var
encoder =
new
JPEGEncoder();
base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);
}
else
{
//alert(Orientation);
if
(Orientation !=
""
&& Orientation != 1){
//alert('旋轉處理');
switch
(Orientation){
case
6:
//須要順時針（向左）90度旋轉
alert(
'須要順時針（向左）90度旋轉'
);
rotateImg(
this
,
'left'
,canvas);
break
;
case
8:
//須要逆時針（向右）90度旋轉
alert(
'須要順時針（向右）90度旋轉'
);
rotateImg(
this
,
'right'
,canvas);
break
;
case
3:
//須要180度旋轉
alert(
'須要180度旋轉'
);
rotateImg(
this
,
'right'
,canvas);
//轉兩次
rotateImg(
this
,
'right'
,canvas);
break
;
}
}
base64 = canvas.toDataURL(
"image/jpeg"
, 0.8);
}
//uploadImage(base64);
$(
"#myImage"
).attr(
"src"
, base64);
};
};
oReader.readAsDataURL(file);
}
}
//對圖片旋轉處理 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);
}
//img.setAttribute('step', step);
/*var canvas = document.getElementById('pic_' + pid);
if (canvas == null) {
img.style.display = 'none';
canvas = document.createElement('canvas');
canvas.setAttribute('id', 'pic_' + pid);
img.parentNode.appendChild(canvas);
} */
//旋轉角度以弧度值爲參數
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
;
}
}
相關文章
- 1. 關於exif.js
- 2. EXIF.js 讀取圖片的方向
- 3. 利用exif.js解決ios手機上傳豎拍照片旋轉90度問題
- 4. Vue2.0實現調用攝像頭進行拍照功能以及圖片上傳功能引用exif.js（2）
- 5. Vue2.0實現調用攝像頭進行拍照功能以及圖片上傳功能引用exif.js
- 6. html5+exif.js+canvas實現手機端照片上傳預覽、壓縮、旋轉功能（轉）
- 7. Vue2.0 引用 exif.js 實現調用攝像頭進行拍照功能以及圖片上傳功能
- 8. ios手機上傳豎拍照片旋轉90度問題
- 9. PC端、移動端手機豎拍原圖壓縮上傳順時針旋轉90°的解決方案
- 10. 移動端上傳照片 預覽（解決iOS等設備照片旋轉90度的bug）
- 更多相關文章...
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 關於exif.js
- 2. EXIF.js 讀取圖片的方向
- 3. 利用exif.js解決ios手機上傳豎拍照片旋轉90度問題
- 4. Vue2.0實現調用攝像頭進行拍照功能以及圖片上傳功能引用exif.js（2）
- 5. Vue2.0實現調用攝像頭進行拍照功能以及圖片上傳功能引用exif.js
- 6. html5+exif.js+canvas實現手機端照片上傳預覽、壓縮、旋轉功能（轉）
- 7. Vue2.0 引用 exif.js 實現調用攝像頭進行拍照功能以及圖片上傳功能
- 8. ios手機上傳豎拍照片旋轉90度問題
- 9. PC端、移動端手機豎拍原圖壓縮上傳順時針旋轉90°的解決方案
- 10. 移動端上傳照片 預覽（解決iOS等設備照片旋轉90度的bug）