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