移动端ios图片处理的思路，是先用exif.js获取到旋转的角度，然后把图片进行压缩处理，最后再旋转图片
为什么要压缩图片？因为移动端的ios上对canvas的toDataUrl这个api的支持有大小限制，图片大小不能超过400万像素
// 获取旋转角度
functionget Orientation(image,callback) {
EXIF.getData(image,function() {
varorientation=EXIF.getTag(this,'Orientation');
console.log('orientation:'+orientation);
// Orientation = orientation;
callback(orientation);
})
}
// 图片旋转
function rotateImage(image,orientation,callback) {
console.log('rotateImage');
varwidth=image.width;
varheight=image.height;
varcanvas=document.createElement("canvas")
varctx=canvas.getContext('2d');
varnewImage=newImage();
//旋转图片操作
// EXIF.getData(image, function () {
// console.log("coming in")
// var orientation = EXIF.getTag(this, 'Orientation');
// console.log('orientation:' + orientation);
switch(orientation) {
//正常状态
case1:
console.log('旋转0°');
// canvas.height = height;
// canvas.width = width;
newImage=image;
break;
//旋转90度
case6:
console.log('旋转90°');
canvas.height=width;
canvas.width=height;
ctx.rotate(Math.PI/2);
ctx.translate(0,-height);
ctx.drawImage(image,0,0)
imageDate=canvas.toDataURL('Image/jpeg',1)
newImage.src=imageDate;
break;
//旋转180°
case3:
console.log('旋转180°');
canvas.height=height;
canvas.width=width;
ctx.rotate(Math.PI);
ctx.translate(-width,-height);
ctx.drawImage(image,0,0)
imageDate=canvas.toDataURL('Image/jpeg',1)
newImage.src=imageDate;
break;
//旋转270°
case8:
console.log('旋转270°');
canvas.height=width;
canvas.width=height;
ctx.rotate(-Math.PI/2);
ctx.translate(-height,0);
ctx.drawImage(image,0,0)
imageDate=canvas.toDataURL('Image/jpeg',1)
newImage.src=imageDate;
break;
//undefined时不旋转
caseundefined:
console.log('undefined 不旋转');
newImage=image;
break;
}
callback(imageDate);
// });
}
function compress(img,callback) {
varinitSize=img.src.length;
varwidth=img.width;
varheight=img.height;
// 用于压缩图片的canvas
varcanvas=document.createElement("canvas");
varctx=canvas.getContext('2d')
// 瓦片canvas
vartCanvas=document.createElement("canvas");
vartctx=tCanvas.getContext("2d");
//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
varratio;
if((ratio=width*height/4000000)>1) {
ratio=Math.sqrt(ratio);
width/=ratio;
height/=ratio;
}else{
ratio=1;
}
canvas.width=width;
canvas.height=height;
// 铺底色
ctx.fillStyle="#fff";
ctx.fillRect(0,0,canvas.width,canvas.height);
//如果图片像素大于100万则使用瓦片绘制
varcount;
if((count=width*height/1000000)>1) {
count=~~(Math.sqrt(count)+1);//计算要分成多少块瓦片
// 计算每块瓦片的宽和高
varnw=~~(width/count);
varnh=~~(height/count);
tCanvas.width=nw;
tCanvas.height=nh;
for(vari=0;i
for(varj=0;j
tctx.drawImage(img,i*nw*ratio,j*nh*ratio,nw*ratio,nh*ratio,0,0,nw,nh);
ctx.drawImage(tCanvas,i*nw,j*nh,nw,nh);
}
}
}else{
ctx.drawImage(img,0,0,width,height);
}
//进行最小压缩
varndata=canvas.toDataURL("image/jpeg",0.1);
console.log("压缩前："+initSize);
console.log("压缩后："+ndata.length);
console.log("压缩率："+~~(100*(initSize-ndata.length)/initSize)+"%");
tCanvas.width=tCanvas.height=canvas.width=canvas.height=0;
varimage=newImage();
image.src=ndata;
image.onload=function() {
callback(image);
}
}
