I have a QR code image in the database. I’d like to overlay a small dynamic image over the center so it still works and then run a JS function to download the whole thing. I’m aware of the plugins out there but would like to do this with vanilla Bubble.
My best guess would be to stack both in a group but hide it from view. From there, I’d have the merged image be the object of the JS download.
Not sure how you would vanilla-Bubble this since it involves manipulating two images and merging each other. I feel like the best bet would be the plugins you’re talking about or making your own.
If you literally just want to overlay them you can make a “Align to parent” layout group and place them over each other, but then you would need a plugin anyways to like screenshot the whole group?
If you literally just want to overlay them you can make a “Align to parent” layout group and place them over each other
This is what I had in mind- I’ll try it and see if it works!
I was able to create the composite image and display it, although my real goal is to save the group to a thing. Unfortunately, it’s not saving to the database even though I set the group’s type to image. Debug shows an empty value…
You need some kind of plugin or Javascript to re-render the image and save it, there’s no way to overlay them and somehow have Bubble combine pixels together 
That is disappointing
Any particular reason you don’t want a plugin? (especially if there’s no vanilla option) Watermark (Text & Image) · BEP Plugin | Bubble
You can even see the plugin code
This looks like it should do the trick. I should clarify- this is for a QR code overlay and I didn’t want to use a certain plugin that was great when it was built but later acquired by a company that doesn’t have the most sterling reputation on here.
Renato on the other hand has an excellent reputation so I’ll give this a try.
Yep I feel that cough zero qode cough
The Watermark plugin by @renatoasse is awesome, but what if both of my images are in the database already? There’s a Bubble source input for the watermark image, but what about the original image?
Isn’t it set up like this?
Also if you’re making the QR codes from another plugin, there might be an option to add your own icon in the middle 
I think the one I use let me specify but I didn’t.
That makes sense, I’'ll try it. The one I’m using is doesn’t have that option- which one did you use?
Same plugin, it looks like yours is just scrolled down or something… 
Oh I meant the QR plugin.
Oh oops, Barcode & QR Code Generator Plugin | Bubble
It has an element “QR Code with Logo”. I noticed logo was in the name but I didn’t ever use it.
Ah yes I tried that one but the quality didn’t turn out great for me and I ran into the same problem with not being able to save it to the database.
O yea nvm then, quick question tho, if you overlay a picture, isn’t that gonna block important parts of the QR code? I’m used to certain ones with icons where it is generated “around” the icon
@tylerboodman could be wrong tho, wouldn’t be first time
Nevermind apparently QR codes have redundant information: Is it safe to put logo on any QR code at center? - Stack Overflow
Definitely possible but QRs are fairly durable. The challenge with a lot of these plugins is to resize the overlay image. The download action on the Watermark plugin wasn’t working for me, and I determined that it was because 1) the overlay image was too large and 2) I actually needed to add a delay between the Image and Download actions.
Now I just have to figure out how to save the downloaded file to the database (i.e., the merged image’s url), but that’s giving me problems atm.
