怎样将图片制作转换圆形图片

近期在网上看到一些将普通的矩形图片转换生成圆形图片的需求。说明一下这里所说的圆形图片是指的类似网络头像的那种正圆形，而不是说图片的四个角是圆弧形，是一个完全正圆形的图片。因此就想着自己实现一下这个生成圆形图片的功能发布到自己网站上。这个功能的实际页面效果如下所示：

总而言之，这个功能用起来完全不复杂，也没有任何用户参数选项啥的，只需要选择上传一张图片就可以制作完成了。并且导出的圆图是直接对上传的原图进行裁剪的，所以画质不会有任何损失，裁剪之后的尺寸和你的选择框大小有关，如果你的选择框和原图一样大，也就是说选择框100%大小，那么裁剪出来的图也是100%大小。简单点说，画质和尺寸在转换过程中不会因为算法而损失。并且可以实时预览，比如我们一边移动裁剪框，另一边就能实时的预览生成的圆图效果，很方便。

圆形图片生成器,照片制作圆图工具https://www.butterpig.top/imgcircle

具体的实现实际上就是用的canvas，每次截取到裁剪框中的图像，然后导入到一个隐藏的canvas中，通过canvas中的arc画出一个宽高和截取部分相同的正圆，然后clip，最后drawimage就搞定了。

另外，网站上本来就有一个生成圆角图的功能，圆角图功能就不是将图片变成圆形了，而是把图片的四个角变成圆形的，并且圆角的大小还能自己控制，还能控制某个角是否需要转换等等。这两个功能可以互相跳转。