HTML5+canvas进行移动端手机照片上传时，发现iOS手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。
因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。
利用exif.js读取照片的拍摄信息，这里主要用到Orientation属性。
Orientation属性说明如下：
下面就直接上代码了。
主要有html5页面和一个js，示例功能包含了图片压缩和旋转。
自己写的是uploadImage.js。
html5测试页面如下：
<!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
;
}
}
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
