图片上传裁剪之小记

项目须要在图片上传到服务器以前提供用户裁剪图片，并且要求圆形的裁剪框，因而，咱们在裁剪上传到服务器以前写一个引用裁剪的方法，固然咱们须要插件cropper.js. 而后裁剪以后经过canvas吧图片裁剪成圆形，这时候要求用户上传的图片必须是正方形，因此咱们用canvas裁剪时取的半径和圆心位置都是图片裁剪以前的1/2。可是后面需求增长到容许用户上传宽高不一致的图片，那么问题就出现了，裁剪后的图片位置不一。缘由是由于给canvas设置半径圆心时是以原始图片的宽高而定的，实际上应该以裁剪完成后的图片宽高为准，由于裁剪后的图片都是正方形。