web app canvas旋转缩放错误

[额森呢]

想用H5开发一个移动端修图小APP。实现滤镜，反转，裁剪，贴纸等功能。看了一圈选择了 canvas 。 问题是，当我旋转完图片，再添加滤镜时获取的imageData会自带反转缩小等信息。所以添加完滤镜后图片会自动旋转一圈并缩小。图片方向正的时候没有问题，只要旋转成横向就会出现问题。
贴出代码 JS:

// 旋转数值
var rotateNum = 0 ;
var rotateValue = 0;
var rotateValue2 = 0;
// 大小设定
var canvasHeight = $(".convas").height()
var canvasWidth = $(".convas").width()
var canvas = document.getElementById('canvasSize');
canvas.width= canvasWidth;
canvas.height= canvasHeight;
// 引入CANVAS

var ctx=canvas.getContext('2d');

// 引入图片

var img = new Image();

    img.src = localStorage.getItem("cameraimgSrc") || localStorage.getItem("photoimgSrc") ;

    // 加载图片

img.onload=function(){

draw(img,0,0);

};

function draw(img,rotateNum,flag){

// canvas载入图片

ctx.drawImage(img,0,0, canvasWidth,canvasHeight);

// 旋转缩小or放大图片

switch(flag){

case 1:

ctx.clearRect(0,0, canvasWidth,canvasHeight);

ctx.translate(canvas.width/2,canvas.height/2);

ctx.rotate(rotateNum * Math.PI / 180);

// 如果横向缩小，纵向则需放大

if(rotateValue2 === 0){

ctx.scale(1,1);

}else{

if ((rotateValue)%2 == 0) {

ctx.scale(Math.abs((canvasHeight)/canvasWidth),Math.abs((canvasHeight)/canvasWidth));

// console.log("the rotateValue is in if "+rotateValue);

}else{

ctx.scale(Math.abs((canvasWidth)/canvasHeight),Math.abs((canvasWidth)/canvasHeight));

// console.log("the rotateValue is in else "+rotateValue);

}

}

ctx.translate(-canvas.width/2,-canvas.height/2);

ctx.drawImage(img,0,0, canvasWidth,canvasHeight);

break;

}

// 获取imageData

var imageData = ctx.getImageData(0,0, canvasWidth,canvasHeight);

// 图片滤镜

switch(flag){

case 2:

for (var i=0;i<imageData.data.length;i+=4)

{

var r = imageData.data[i + 0];  

var g = imageData.data[i + 1];  

var b = imageData.data[i + 2];

var a = imageData.data[i+3];

var gray = 0.299 * r + 0.587 * g + 0.114 * b;

imageData.data[i+0]=gray;

imageData.data[i+1]=gray;

imageData.data[i+2]=gray;

imageData.data[i+3]=255;

}



ctx.putImageData(imageData,0,0);

img.src = canvas.toDataURL("image/png");

break;

case 3:

for (var i=0;i<imageData.data.length;i+=4)

{

var r = imageData.data[i + 0];  

var g = imageData.data[i + 1];  

var b = imageData.data[i + 2];

var a = imageData.data[i+3];

imageData.data[i+0]=100;

}

ctx.putImageData(imageData,0,0);

img.src = canvas.toDataURL("image/png");

break;

}

};

// 顺时针旋转按钮

$("#CWRotate").click(function(){

rotateValue += 1;

rotateValue2 += 1;

rotateNum = 90;

draw(img,rotateNum,1);

});

// 逆时针旋转按钮

$("#NWRotate").click(function(){

rotateValue -= 1;

rotateValue2 += 1;

rotateNum = -90;

draw(img,rotateNum,1);

});

// 滤镜按钮

$("#filterOne").click(function(){

img.src = localStorage.getItem("cameraimgSrc") || localStorage.getItem("photoimgSrc") ;

draw(img,0,2);

});

// 滤镜按钮

$("#filterTus").click(function(){

img.src = localStorage.getItem("cameraimgSrc") || localStorage.getItem("photoimgSrc") ;

draw(img,0,3);

});