Adding an overlay image to an image upon download

This topic has 8 replies, 2 voices, and was last updated 2 years, 3 months ago by kdv.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
2022-08-11 at 3:07 am #54734

mjdesigner
Participant

Hi,

I am learning how to use the nifty 2D Canvas plugin by CyberFox. I would like to be able to apply a transparent PNG on top of an image that is being downloaded.

So when the user clicks the download button, I can apply a PNG over the top of the image before it gets saved by a user.

I was trying to add a PNG using CSS puzzles (z-index and positioning set top:0 left:0) before the “drawer to image” puzzle, but I am not sure what to do to make it work.

Any hints would be most appreciated, thanks, MJ

Attachments:
You must be logged in to view attached files.

2022-08-11 at 3:33 am #54737

kdv
Participant

Looks like you want to add a watermark to screenshots, right?

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2022-08-11 at 5:27 am #54738

mjdesigner
Participant

Yes! basically that’s the idea – the product has parts that will be in front of the user’s artwork, blocking the view.

Though, it’s not a straight screenshot as much as it’s the plugin downloading its canvas area.

So when the user downloads the composited picture they made (they drag in their bits of art on top of the background image) they can see in the download what parts will be covered up by parts.

Related challenge: I was also trying to figure out how to add an image above the ‘canvas’, but can be clicked though (using “pointer-events: none;” so they can add artwork and still see the parts obscuring the artwork. I am trying to use CSS to add it above the plugin’s canvas. (if you’re familiar with this plugin: https://www.soft8soft.com/wiki/index.php/CyberFox_2D_Canvas_Editor_plugin )

Attachments:
You must be logged in to view attached files.

2022-08-11 at 5:37 am #54741

kdv
Participant

I still don’t understand what you want ))) Do you want to add a watermark or some other image to the canvas before taking a screenshot?

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2022-08-12 at 4:59 am #54778

kdv
Participant

Check this
https://v3d.net/a3g

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2022-08-12 at 5:08 am #54780

mjdesigner
Participant

Wow, that’s cool! I was just drawing up a sketch to help explain my muddled question, but your demo is what I am trying to achieve. I saw your earlier comment, so that’s great you found a way to do this. What did you need to do to get this result?

2022-08-12 at 7:20 am #54787
kdv
Participant
Well, you need some scripting to do what you want )))
```
VARS.waterMarkImage = new Image();
VARS.waterMarkImage.src = "./sample-watermark.png";
```
VARS.myDrawer.getContext("2d").drawImage(VARS.waterMarkImage, 0, 0, 300, 300);

You also need to change the function cf_drawerToImage().

Deactivate two green lines and add the line that is selected on the screenshot.

You can do it in visual_logic.js (but you’ll have to do it every time after saving puzzles) or you can find this function in the plugin files and change it there once.

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
2022-08-13 at 10:54 pm #54810

mjdesigner
Participant

Hi, I followed your instructions and… it worked perfectly, thank you. I really appreciate your clear step-by-step guide, I would have never figured that out on my own. Quick question, if I run into other coding challenges like this, do you do freelance work?

2022-08-13 at 11:09 pm #54811

kdv
Participant

Maybe, it depends on what you’ll want )))

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
Author

Posts