Closed

[login to view URL] combined with [login to view URL] and overlay image

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.

Attached files:

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

Skills: CSS, HTML, HTML5, Javascript, jQuery / Prototype

See more: auto crop image javascript, dropzone crop image before upload, javascript crop image to square, cropper js ready event, cropper.js fixed size, vanilla js image crop, crop image javascript code, cropper js get cropped image, drag overlay image javascript, simple overlay image php, javascript animation overlay image view, online image editor overlay image, mencoder overlay image, overlay image editor online free, overlay image magento, ffmpeg overlay image top video, javascript overlay image clickable, ffmpeg overlay image, overlay image editor, html javascript div overlay image click

About the Employer:
( 0 reviews ) Central, Hong Kong

Project ID: #19011632

3 freelancers are bidding on average $1555 for this job

BaNgan

Hi, I can't see the attachment of the files you mentioned, could you resend them again? I have experience working with cropperjs so I may help you complete once I get how the png overlay is placed on the image Check More

$1500 HKD in 3 days
(312 Reviews)
7.3
webdevangel

Hello ! thank you for your post. I have read the your description carefully. I have already worked with dropzonejs and cropperjs. I have the sufficient experience(more 5 years) in developing of web app/hybrid app(a More

$1500 HKD in 3 days
(23 Reviews)
5.0
Invadergroup

13 Years of Experience,Apps development, Ecommerce Stores, All types of Android and IOS Applications , Security and Wireless, VPN, Antiviruses, GUI, Linux, Plugins, Addons, Scripts My motto is to provide high qualit More

$1666 HKD in 20 days
(0 Reviews)
0.0