图片上传裁剪之小记

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