处理移动端ios图片旋转

移动端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);

}

}

推荐阅读更多精彩内容