How to make a circular, resizable and positioning image cropper?

I have to do a component similar to this one. How should I do it? I googled a lot and nothing came up to my needs. I must note that the image should be saved as it is cropped (i.e. as a circle shape). Also, I think that using <canvas> is the solution but I can’t figure out how to achieve it. I have to do it in VueJs and not use any library (such as CropperJs).

Any idea is much appreciated. Thanks!