在微信開發裡會遇到file ,

通常都是獲取file 圖片的base64 ，判斷照像的角度並做出調整。

然後後canvas來旋轉圖片。生成最終base64

再用截圖或什麼。

1、獲取file base64

document.getElementById("id_file1").onchange=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();
					    })
					}					
				});     		
        	});
        }
	}

裡判斷圖片型別和其他的操作。通過FillReader獲取base64

在onload裡建立image圖片物件在成功裡執行回撥，把img 物件  w ,h 傳遞。

在回撥內通過EXIF來獲取Img物件的角度，1 或undefined為不需要旋轉

通過setrotatecanvas來旋轉引數為:img =

Main.filereader=function(fi,call){
	var reader=new FileReader();    
    reader.onload=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.onload=function(){    			
    		    load(img.width,img.height,img);
    	   };
    	}    	
    }
    function load(w,h,img){
    	$('#p_output').append('img onload<br>')
    	call(w,h,img);
    }    
};

引數：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 右下角位置一樣