通过canvas获取file照片，并旋转正确角度

在微信开发里会遇到file ,

通常都是获取file 图片的base64 ，判断照像的角度并做出调整。

然后后canvas来旋转图片。生成最终base64

再用截图或什么。

1、获取file base64

document.getElementById("id_file1").οnchange=change;
    function change(){			
		if($("#id_file1").val() !=""){
			var fi=document.getElementById("id_file1").files[0];
			//alert(fi.name);
        	$("#p_output").append('files<br>');        	
        	if(!/image\/\w+/.test(fi.type)){
        		alert('请选择图片');
        		return ;
        	}     
        	var size=(fi.size/1024).toFixed(2);
        	//alert(size);
        	$("#p_output").append(size+'<br>');    
        	if(size>2000){
        		//$("#p_output").append(size);        		
        	}        	
        	Main.filereader(fi,function(w,h,img){
        		W=w;
        		H=h;
        		$("#p_output").append('filereader onload<br>')
        		img_crop.attr('src',img.src);  
        		EXIF.getData(img, function() {		
        			$("#p_output").append('exifdata onload<br>')
					var a=EXIF.getAllTags(this).Orientation;
					$("#p_output").append(a+'<br>')					
					Main.tation=a;					
					if(a==1 || a==undefined){
						cropper();
					}else{
						setrotatecanvas(w,h,1,img,function(){							
						    cropper();
					    })
					}					
				});     		
        	});
        }
	}

绑定file change事件，

里判断图片类型和其他的操作。通过FillReader获取base64

在onload里创建image图片对象在成功里执行回调，把img 对象  w ,h 传递。

在回调内通过EXIF来获取Img对象的角度，1 或undefined为不需要旋转

通过setrotatecanvas来旋转参数为:img =

Main.filereader=function(fi,call){
	var reader=new FileReader();    
    reader.οnlοad=function(e){
    	$("#p_output").append('reader onload<br>')
        loadimg(this.result);
    };
    reader.readAsDataURL(fi);
    function loadimg(base){
    	var img=new Image();
    	img.src=base;
        if(img.complete){
    		load(img.width,img.height,img);
    	}else{
    		img.οnlοad=function(){    			
    		    load(img.width,img.height,img);
    	   };
    	}    	
    }
    function load(w,h,img){
    	$('#p_output').append('img onload<br>')
    	call(w,h,img);
    }    
};

setrotatecanvas内创建canvas 设置缩放后w h  通过drawImage方法来实现缩放

参数：img  截取位置x0 截取位置y0 截取大小w h  生成位置x y w h

在drawToFinal内实现旋转。

6表示顺时针旋转90度

rotate(0.5 * Math.PI);//旋转90

8表示逆时针旋转90度

rotate(-0.5 * Math.PI);//旋转90

3表示顺时针旋转180度

rotate(1 * Math.PI);

旋转完后用toDataURL生成base64  这是最终的获取到的结果

function setrotatecanvas(w,h,scale,img,call){
		var tempCanvas = document.createElement("canvas");
		var tempContext = tempCanvas.getContext("2d");
		var sw=parseFloat(w/scale)
		var sh=parseFloat(h/scale)
		tempCanvas.width=sw;
		tempCanvas.height=sh;
		tempContext.drawImage(img,0,0,w,h,0,0,sw,sh);        
        var newCanvas=document.createElement('canvas');
        var newContent=newCanvas.getContext('2d');  
        $("#p_output").append('setrotatecanvas onload<br>')
        drawToFinal(tempCanvas,newCanvas,newContent,sw,sh,Main.tation,call);       
}
    /*
	 *使用的canvas  本canvas 本context  源cawidth 源caheight 角度   回调
	 */
function drawToFinal(_sourceCanvas, _drawCanvas, _drawContext, _sw, _sh, _Orientation,call) {
		switch(_Orientation){
			case 6:
			    //图片需要x轴右方  y轴的左方旋转90deg;  原本的宽现在成高了原本的高成宽了
			    _drawCanvas.width=_sh;
			    _drawCanvas.height=_sw;
			    var tSetting = {
					dx: 0,
					dy: 0,
					dw: 0,
					dh: 0,
					transX: 0,
					transY: 0
				};
				tSetting.dw = _sh;//显示在canvas上的宽
				var scale2 = _sw / _sh;
			    tSetting.dh = parseFloat(tSetting.dw / scale2);//算出显示在canvas上的高
				tSetting.dy = (_sw - tSetting.dh) / 2;//显示在canvas上的y
				tSetting.transY = _sw / 2;
				tSetting.transX = _sh / 2;
				_drawContext.translate(tSetting.transX, tSetting.transY);//先平衡 宽高一半
				_drawContext.rotate(0.5 * Math.PI);//旋转90
				//_drawContext.rotate(50*Math.PI/180);
				_drawContext.scale(scale2, scale2);//缩放
				//原canvas 图像截取0 0 截取 w h 显示的x  显示的y  显示出来的w  h
				_drawContext.drawImage(_sourceCanvas, 0, 0, _sw, _sh,
					tSetting.dx - tSetting.transX, tSetting.dy - tSetting.transY,
					tSetting.dw, tSetting.dh);
				break;
			case 8:
			    //图片需要x轴左方  y轴的右方旋转90deg  
			    _drawCanvas.width = _sh;
				_drawCanvas.height = _sw;
				var tSetting = {
					dx: 0,
					dy: 0,
					dw: 0,
					dh: 0,
					transX: 0,
					transY: 0
				};
				tSetting.dw = _sh;
				var scale2 = _sw / _sh;
				tSetting.dh = parseFloat(tSetting.dw / scale2);
				tSetting.dy = (_sw - tSetting.dh) / 2;
				tSetting.transY = _sw / 2;
				tSetting.transX = _sh / 2;
				_drawContext.translate(tSetting.transX, tSetting.transY);
				_drawContext.rotate(-0.5 * Math.PI);
				_drawContext.scale(scale2, scale2);
				_drawContext.drawImage(_sourceCanvas, 0, 0, _sw, _sh, tSetting.dx - tSetting.transX, tSetting.dy - tSetting.transY, tSetting.dw, tSetting.dh);
				
			    break;
			case 3:
			    //180向左旋转 (右旋转也可以。)  
				_drawCanvas.width = _sw;
				_drawCanvas.height = _sh;
				var tSetting = {
					dx: 0,
					dy: 0,
					dw: 0,
					dh: 0,
					transX: 0,
					transY: 0
				};
				tSetting.dw = _sw;
				tSetting.dh = _sh;
				tSetting.transY = _sh / 2;
				tSetting.transX = _sw / 2;
				_drawContext.translate(tSetting.transX, tSetting.transY);
				_drawContext.rotate(1 * Math.PI);
				//_drawContext.scale(scale2,scale2);  
				_drawContext.drawImage(_sourceCanvas, 0, 0, _sw, _sh, tSetting.dx - tSetting.transX, tSetting.dy - tSetting.transY, tSetting.dw, tSetting.dh);
				break;
		}
        var base64 = _drawCanvas.toDataURL('image/jpg');
        $("#id_img1").attr('src', base64)
        $("#p_output").append('drawToFinal onload<br>')
        call();
}

旋转真理：

先移动开始点到canvas的中心，然后旋转。

之后需要找到开始点的位置，相对于cavnas。

左右旋转90 移动x 为-canvas.h/2  移动y 为-canvs.w/2

旋转180 移动x y 分别为cavnas w h 的负一半

右转90开始点需要和canvas右上角位置一样

左转90开始点需要和canvas左下角位置一样

转190开始点需要和canvas 右下角位置一样