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在加载完后继续其他的操作。