前端上传图片在安卓上面很简单,直接用canvas画出来就好了,主要是苹果手机很麻烦,因为苹果手机会旋转图片。所以canvas画出来的图片可能是旋转一定角度的。
话不多说,解决这个问题代码如下:
html代码:
<img src="img/fanpai-font.png" id="stage" />
<input type="file" class="file" onchange="selectFileImage(this)" />
js代码:
这个要导入exif.js.这个是用来获取苹果手机照片方向角属性,用户旋转控制的。
<script src="js/exif.js"></script>
function selectFileImage(fileObj) {
var file = fileObj.files['0'];
var Orientation = null;
if (file) {
console.log("正在上传,请稍后...");
var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
if (!rFilter.test(file.type)) {
alert("请选择jpeg、png格式的图片");
return;
}
//获取照片方向角属性,用户旋转控制
EXIF.getData(file, function() {
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, 'Orientation');
});
var oReader = new FileReader();
oReader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = function() {
var expectWidth = this.naturalWidth;
var expectHeight = this.naturalHeight;
var scale=expectWidth/expectHeight;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = expectWidth;
canvas.height = expectHeight;
//如果方向角不为1,都需要进行旋转
if(Orientation && Orientation != "" && Orientation != 1){
var degree=0;
switch(Orientation){
case 6://需要顺时针(向左)90度旋转
degree=90;
canvas.width = expectHeight;
canvas.height = expectWidth;
ctx.translate(expectHeight/2,expectWidth/2);
ctx.rotate(degree * Math.PI / 180);
ctx.translate(-expectWidth/2,-expectHeight/2);
ctx.drawImage(image,0,0,expectWidth,expectHeight);
break;
case 8://需要逆时针(向右)90度旋转 ;
degree=-90;
canvas.width = expectHeight;
canvas.height = expectWidth;
ctx.translate(expectHeight/2,expectWidth/2);
ctx.rotate(degree * Math.PI / 180);
ctx.translate(-expectWidth/2,-expectHeight/2);
ctx.drawImage(image,0,0,expectWidth,expectHeight);
break;
case 3://需要180度旋转
degree=-180;
ctx.rotate(degree * Math.PI / 180);
ctx.drawImage(image,-expectWidth,-expectHeight,expectWidth,expectHeight);
break;
}
}else{
ctx.drawImage(image,0,0,expectWidth,expectHeight);
}
var datu = canvas.toDataURL("image/png");
$("#stage").attr("src", datu);
};
};
oReader.readAsDataURL(file);
}
}