I'm trying to make a png overlay (watermark or branding) on top of a cropped canvas dropzone file. The endpoint is to have a combined and valid imageurl of a jpg or png that I can save to my formdata and call this on another page to let a user share this combined picture to her/his Facebook.
At the stackoverflow url, you can find a stripped (privacy data) but (90%) working snippet. The code is mostly made by combining two examples:
[login to view URL] [login to view URL]
Instead of a black overlay with [login to view URL]() I would like to add an overlay of a png image on top (!this is important) of the cropped canvas, convert them all together to blop and send them merged to the dropzone thumbnail at the same time.
It's very important the overlay is appended at the same time the cropped canvas is being sent back to dropzone.
The proportions of the canvas are set to preserve the aspectRatio for Facebook pictures (min. 780x407).
This snippet of code is doing mostly everything I want it to do, accept drawing another predefined png overlay on top of the cropped canvas image.
If you have any more questions, please don't hesitate to ask me.
image1 = an example of uploaded file by a user (variable)
image1-cropped = the upload file cropped to Facebook dimensions (780x407)
image 2 = the png overlay (predefined, constant)
image 3 = image1-cropped + image2 combined