file 图片的剪切

移动端经常会遇到file 照完相以后获取图片，再剪切缩放移动等 最后获取剪切的图片。

在获取图片时需要对图片进行旋转，这个功能上一文章写过了。

这里讲剪切实现。

移动端可以用Hammer.js来实现移动放大绑定。

最后会有代码

显示的照片一开始肯定不能是原来的尺寸。需要一个默认w h .

这里自己定义。

移动和缩放时要判断不能移出规定大小。

还有如果图片旋转了这时再用原图的w h 来当做移动的判断和剪切就有问题了。

所以当旋转时需要把宽和高调换下。

这是第一个需要注意的地方。

在剪切时算原图上的dx dy dw dh时也需要注意一点。

原宽和现宽比  ，原高比和现高比。

我一开始用宽比和算剪切的高。这时就出问题了。

它们两个比例不能通用。

var b=parseFloat(W/nw);	
		var hb=H/nh;
		var ux=Math.round(Math.abs(l)*b);
		var uy=Math.round(Math.abs(t)*hb);
		var sw=Math.round(150*b);
		var sh=Math.round(300*hb);
		$("#p_output").append(nw+','+nh+'<br/>'+l+','+t+'<br/>'+W+','+H+'<br/>'+ux+','+uy+'<br/>'+sw+','+sh)		
		
		var can2=document.createElement('canvas');
		var ctx2=can2.getContext('2d');
		can2.width=150;
		can2.height=300;
		ctx2.drawImage(IMG,ux,uy,sw,sh,0,0,150,300);

以上是剪切代码。

var stage = document.getElementById('pan');    	
	// create a manager for that element
	var mc = new Hammer.Manager(stage);		
	var img=$("#id_img1");
	img_crop=img;
	
	//拖动
	var Pan=new Hammer.Pan({ threshold: 0, pointers: 0})
	mc.add(Pan);
	var dx,dy=0;
	var cc=true;	
	mc.on('panmove',function(ev){
		//console.log(ev)
		if(cc==false){
			//$("#p_output").html('双指 <br>');        	
			return ;
		}
		dx=l+ev.deltaX;			
		dy=t+ev.deltaY;
		//console.log(dx,dy);
		if(dx>0){
			dx=l=0;
		}else if(Math.abs(dx)>(nw-150)){
			dx=l=150-nw;
		}	
		if(dy>0){
			dy=t=0;
		}else if(dy<(300-nh)){
			dy=t=300-nh;
		}
		img.css({'left':dx+'px','top':dy+'px'});
	})
	mc.on('panend',function(ev){		
		//cc=true;
		l=parseFloat(img.css('left'));
		t=parseFloat(img.css('top'));
	})
	
	//ha.get('pinch').set({ enable: true });
	var Pinch = new Hammer.Pinch();
	Pinch.recognizeWith([
	    Pan
	]);
	mc.add(Pinch)
	mc.on('pinchstart',function(e){
		cc=false;
		//$("#p_output").html('false <br>'); 
	})
	function xiao(){
		//scale-=0.01;
        //img.css({'scale':scale})
        var n1=nw;
    	var n2=nh;
    	nw=nw-nw*0.01;
        nh=nh-nh*0.01;        
        var d1=nw+l-150;
        var d2=nh+t-300;
        //console.log(d1,d2)
        if(d1<0 || d2<0){
        	nw=n1;
        	nh=n2;
        	return ;
        }        
        img.css({'width':nw+'px'});
	}
	function da(){
		//scale+=0.01;
        //img.css({'scale':scale})  
        nw=nw+nw*0.01;
        nh=nh+nh*0.01;
        img.css({'width':nw+'px'});
	}
	mc.on("pinchin", function (e) {   		
        xiao();
    });    
    mc.on('pinchout',function(){
    	da();
    });
    mc.on('pinchend',function(){
    	cc=true;
    	//$("#p_output").html('true <br>');  
    })

以上是拖动绑定和算法。

还有一个需要小注意的是：

当需要使用drawImage获取的base64图片时，最好创建一个Image

监听load 和complete在加载完后继续其他的操作。