移動端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) {
//正常狀態(tài)
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);
}
}
