裁剪图片，上网找到了一个插件cropper，这个插件还是挺强大，支持裁剪、旋转、翻转，但是它并没有对图片真正的处理，只是记录了用户做了哪些变换，然后你自己再去处理。可以把变换的数据传给后端，让后端去处理。这里我们在前端处理，因为我们不用去兼容IE8。
如下，我把一张图片，旋转了一下，同时翻转了一下：
它的输出是：
{ height: 319.2000000000001, rotate: 45, scaleX: -1, scaleY: 1, width: 319.2000000000001 x: 193.2462838120872 y: 193.2462838120872 } { height:319.2000000000001, rotate:45, scaleX:-1, scaleY:1, width:319.2000000000001 x:193.2462838120872 y:193.2462838120872 }
通过这些信息就知道了：图片被左右翻转了一下，同时顺时针转了45度，还知道裁剪选框的位置和大小。通过这些完整的信息就可以做一对一的处理。
在展示的时候，插件使用的是img标签，设置它的css的transform属性进行变换。真正的处理还是要借助canvas，这里分三步说明：
1. 假设用户没有进行旋转和翻转，只是选了简单地选了下区域裁剪了一下，那就简单很多。最简单的办法就是创建一个canvas，它的大小就是选框的大小，然后根据起点x、y和宽高把图片相应的位置画到这个画布，再导出图片就可以了。由于考虑到需要翻转，所以用第二种方法，创建一个和图片一样大小的canvas，把图片原封不动地画上去，然后把选中区域的数据imageData存起来，重新设置画布的大小为选中框的大小，再把imageData画上去，最后再导出就可以了：
var cvs = document.createElement('canvas'); var img = $img[0]; var width = img.naturalWidth, height = img.naturalHeight; cvs.width = width; cvs.height = height; var ctx = cvs.getContext("2d"); var destX = 0, destY = 0; ctx.drawImage(img, destX, destY); //把选中框里的图片内容存起来 var imageData = ctx.getImageData(cropOptions.x, cropOptions.y, cropOptions.width, cropOptions.height); cvs.width = cropOptions.width; cvs.height = cropOptions.height; //然后再画上去 ctx.putImageData(imageData, 0, 0); varcvs=document.createElement('canvas'); varimg=$img[0]; varwidth=img.naturalWidth, height=img.naturalHeight; cvs.width=width; cvs.height=height; varctx=cvs.getContext("2d"); vardestX=0, destY=0; ctx.drawImage(img,destX,destY); //把选中框里的图片内容存起来 varimageData=ctx.getImageData(cropOptions.x,cropOptions.y,cropOptions.width,cropOptions.height); cvs.width=cropOptions.width; cvs.height=cropOptions.height; //然后再画上去 ctx.putImageData(imageData,0,0);
代码14行，通过插件给的数据，保存选中区域的图片数据，18行再把它画上去
2. 如果用户做了翻转，用上面的结构很容易可以实现，只需要在第11行drawImage之前对画布做一下翻转变化：
canvas flip实现 JavaScript
//fip if(cropOptions.scaleX === -1 || cropOptions.scaleY === -1){ destX = cropOptions.scaleX === -1 ? width * -1 : 0; // Set x position to -100% if flip horizontal destY = cropOptions.scaleY === -1 ? height * -1 : 0; // Set y position to -100% if flip vertical ctx.scale(cropOptions.scaleX, cropOptions.scaleY); }
ctx.drawImage(img, destX, destY);
//fip if(cropOptions.scaleX===-1||cropOptions.scaleY===-1){ destX=cropOptions.scaleX===-1?width*-1:0; // Set x position to -100% if flip horizontal destY=cropOptions.scaleY===-1?height*-1:0; // Set y position to -100% if flip vertical ctx.scale(cropOptions.scaleX,cropOptions.scaleY); }
ctx.drawImage(img,destX,destY);
其它的都不用变，就可以实现上下左右翻转了，难点在于既要翻转又要旋转
3. 两种变换叠加没办法直接通过变化canvas的坐标，一次性drawImage上去。还是有两种办法，第一种是用imageData进行数学变换，计算一遍得到imageData里面，从第一行到最后一行每个像素新的rgba值是多少，然后再画上去；第二种办法，就是创建第二个canvas，第一个canvas作翻转，把它的结果画到第二个canvas，然后再旋转，最后导到。由于第二种办法相对比较简单，我们采取第二种办法：
同上，在第一个canvas画完之后：
实现旋转、翻转结合 JavaScript
ctx.drawImage(img, destX, destY); //rotate if(cropOptions.rotate !== 0){ var newCanvas = document.createElement("canvas"), deg = cropOptions.rotate / 180 * Math.PI; //旋转之后，导致画布变大，需要计算一下 newCanvas.width = Math.abs(width * Math.cos(deg)) + Math.abs(height * Math.sin(deg)); newCanvas.height = Math.abs(width * Math.sin(deg)) + Math.abs(height * Math.cos(deg)); var newContext = newCanvas.getContext("2d"); newContext.save(); newContext.translate(newCanvas.width / 2, newCanvas.height / 2); newContext.rotate(deg); destX = -width / 2, destY = -height / 2; //将第一个canvas的内容在经旋转后的坐标系画上来 newContext.drawImage(cvs, destX, destY); newContext.restore(); ctx = newContext; cvs = newCanvas; } ctx.drawImage(img,destX,destY); //rotate if(cropOptions.rotate!==0){ varnewCanvas=document.createElement("canvas"), deg=cropOptions.rotate/180*Math.PI; //旋转之后，导致画布变大，需要计算一下 newCanvas.width=Math.abs(width*Math.cos(deg))+Math.abs(height*Math.sin(deg)); newCanvas.height=Math.abs(width*Math.sin(deg))+Math.abs(height*Math.cos(deg)); varnewContext=newCanvas.getContext("2d"); newContext.save(); newContext.translate(newCanvas.width/2,newCanvas.height/2); newContext.rotate(deg); destX=-width/2, destY=-height/2; //将第一个canvas的内容在经旋转后的坐标系画上来 newContext.drawImage(cvs,destX,destY); newContext.restore(); ctx=newContext; cvs=newCanvas; }
将第二步的代码插入第一步，再将第三步的代码插入第二步，就是一个完整的处理过程了。
最后再介绍下上传
4. 文件上传和上传进度