问题
I'm working on an pet finding app and I need to crop the pet's avatar into a small circle that will later be "merged"/combined with an outline and then passed as a Marker to static google maps. I want to make this on the front-end, because doing this on the back-end would require (if the service expands or grows too much) some more space management for images.
This is the outline:
The result should look like this:
The profile picture might be of any size bigger than the outline, so they will be of any shape (generally square or rectangular).
I'm trying to figure out if I can do this entirely on the front-end. As far as I know, I can:
- Take the profile image and insert it into a canvas
- Then crop it in a circular shape (don't know how to do this)
- Transform it back into an image (not sure if this is needed)
- Add it to another canvas so I can combine it with the outline
- Save it as an image and then send it to static google maps as a marker
I thought if I made the canvas borders round (with css border-radius) it could work, but it didn't.
So, for the question itself, can an image be cropped into a circle with just JavaScript and Canvas (on the front-end) or should I make this on the back-end? And if it can, how?
Thanks in advance.
来源：https://stackoverflow.com/questions/23891579/how-to-crop-a-circle-shaped-image-and-then-set-it-inside-another-image