Allow user to shade picture on website and crop the edges

What’s the best way to allow user to easily crop an image on my mobile Web app?

For example, I have this original image:
enter image description here

I want to allow user to be able to select certain areas of the image in order to indicate the area they want to crop, while maintaining good user experience on mobile. One way I thought of is to allow user to highlight/color the image such as the following:
enter image description here

Finally, the user should press a button that process the image such that only the extreme edges of the highlighted area would be the crop coordinates. And the desired output image would be something like this.
enter image description here

Unfortunately, I do not know how to achieve the above. Appreciate any code example or guide to help me along.

I also thought of using bounding boxes on html canvas to allow users to drag to size and there’s multiple code examples that I found online for this. However, the user experience on mobile is horrible. Hence I decided to drop the idea.

Thanks in advance!