We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Adding an overlay image to an image upon download

Home Forums Puzzles Adding an overlay image to an image upon download

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #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.
    #54737
    kdv77kdv
    Participant

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

    #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 )

    • This reply was modified 1 month, 2 weeks ago by mjdesigner.
    Attachments:
    You must be logged in to view attached files.
    #54741
    kdv77kdv
    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?

    #54778
    kdv77kdv
    Participant

    Check this
    https://v3d.net/a3g

    #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?

    #54787
    kdv77kdv
    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.

    #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?

    #54811
    kdv77kdv
    Participant

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.