We are creating Bubble apps for our startup and needed an easy way to turn a user’s profile picture into a custom map pin that we could show on a Google Map. One of the problems with existing tools was that they didn’t support the alpha channel (transparent background), a requirement for a map marker pin. So we utilized several existing libraries to create a new custom solution to use in our own production app.
Image Merge utilizes the HTML5 Canvas API to draw images dynamically. Serve on-the-fly merged or “watermarked” images to your users without modifying the source images in your file system. This light and simple tool references the watermark.js, compress.js and QRious.js libraries.
Unlike most watermark utilities Image Merge maintains the image alpha channel (opacity) allowing you to work with transparent PNG images with creative results.
Image Merge also includes QRious.js, a very lightweight QR code generation tool based on the Canvas API, allowing you to control foreground and background color and opacity, as
well as create logo watermarks!
Our latest release adds the ability to resize images as well as set radius corners. (Create round image crops!)
Everything is working great so far, and everything is very simple to use, just one thing I’m having trouble with is the position of watermarked text, we have the options for ‘center’, ‘Upper left’ etc.
But I really need to have it aligned in the center of top , tried using the custom coordinates, but my watermarked text varies in length, so an option to center it in the top somehow would be very very nice!
Hey, thanks so much for posting on your issue. It is possible to add the setting you asked, but let me see if I understand your problem as there might already be a solution. You have a consistently-sized image, but your watermark text varies in length. You have used the custom positioning, but it does not work for every case because the position is based off of the bottom left of the first line of text, so the text extends different lengths and doesn’t look centered.
I think you may be able to solve your problem by using the “Custom” position as you have done, but with “Center” alignment. This makes the center of the line of text the position point. So for instance if you have a 600 x 600 pixel image, you could say place the text at x=300, y=100 and have any legth of text top centered. (*Remember position uses the bottom of the line of text, so you will need to consider the height of the font you are using when setting y. A y value of 0 will hide the text above the top of the image.)
Hey @rob.lewis this is exactly what I’m looking for. I’m building a feature that will overlay text over background images. My question: do you anticipate the plugin will be easy for you guys to maintain? It’s very reasonably priced, I’m more focused on reliability since a pretty substantial chunk of my app would rely on it.
Also, I know there are download and save actions, but can you also take the resulting file and make changes to a thing?
Image merges are a huge blindspot for Bubble IMO- glad you guys built this one!
To answer your question it is our intention to maintain it indefinitely. The plugin is of course based off of the relatively recent Canvas api as well as a couple of related libraries so I would hope browser technology wouldn’t cause it to be deprecated in the near future. Aside from breaking changes from Bubble itself I’d say you’re safe for a while. And in the event this plugin did become ineffective for you it should be possible to implement a Canvas based solution via pure Javascript.
This is very cool and useful, thanks! I’m having trouble using the save merge function though. In the preview it seems to utilize a “preview” flow. I don’t see that available. How do I simply save the output to a data type?
Hey, thanks for the question. As you have noticed, the images are being generated in the browser and displayed by referencing the Image Merge element’s Blob URLs:first item ( first item because you can process a list).
However, Blob URLs only exist for the current browser session, and should not be saved to the database if you intend to reference them later. Instead use the Bubble URLs:first item. This is the URL of the file after upload to Bubble’s servers and will persist.
Hey! Thanks for this plugin. The image and text merging works great. The QR action generates fine, but when attempting to save or download there is a JS error. I thought I was doing something wrong on my end so I checked your demo and noticed it there as well.
To replicate in your demo (Bubble | No-code apps), in the “Add QR Code Overlays” section, click “Demo Merge”, and once generated, click “Download”. You should see the following JS error:
Bug in custom code TypeError: Cannot read properties of undefined (reading '0')
at HTMLDocument.eval (PLUGIN_1684084062429x335641620734017540_current/Image-Merge--testing--element_action--Image-Merge-Download-.js:42:31)
at e (https://image-merge-demo.bubbleapps.io/package/pre_run_jquery_js/dee903a9e36db713e4c86d0cdd96d921e37be0c1293ed8dee29e2e4d7713b9ff/pre_run_jquery.js:2:30158)
at t (https://image-merge-demo.bubbleapps.io/package/pre_run_jquery_js/dee903a9e36db713e4c86d0cdd96d921e37be0c1293ed8dee29e2e4d7713b9ff/pre_run_jquery.js:2:30460)
at root (https://image-merge-demo.bubbleapps.io/package/pre_run_jquery_js/dee903a9e36db713e4c86d0cdd96d921e37be0c1293ed8dee29e2e4d7713b9ff/pre_run_jquery.js:2:31823)
Looks like you found a bug in the mimetype while saving the QR mark. Only took a quick fix and should be working now. Please update to the latest release (1.1.1).
Great app. Was looking for a while for a way to merge images via Bubble.
Is it also possible to save the merges image in the bubble database or file manager?
I used the element Image merge where I merged the two pictures and get a Blob URL as output. I can make a workflow to save the blob url into the database as a text, but for my application I need to save it as a image.
Is there a way to accomplish this with workflow (either action or event)?
It’s available as a state on the element just like BLOB URL.
EDIT: Sorry, I just realized you may have been missing the “Save” action in your workflows. I use “When BLOB URL is not empty” as the trigger and then perform the “Save ImageMerge” action. This way you know the merge process completed.
I tried adding the action save ImageMerge to my workflow. But don’t really understand what this does? where could I find back the filename we gave under filename?
I tried using multiple events with save ImageMerge, but they all give no output in for the variable I gave for my database (is this because my bubble URL is empty?). It does work when I created an event A Image Merge Blob Succes
I see what the problem is. I am in the process of an update that will perform the save in one step, but for the moment let me try to explain.
Running Image a ImageMerge will create a Blob object that is only temporarily stored in your browser session, accessible by the Blob URL. This is great for things that you just want to display once, but not great for storing in your database because the link will no longer work once the browser is closed.
So, if we want to save the image in our database, we will need it first uploaded to our Bubble filesystem (AWS) and then we can reference it with the new URL (Bubble URL) when storing in your database. (Note: The uploaded image will be visible in the database section under your File Manager tab.)
Before starting the upload with the Save a ImageMerge action it is best to wait until the merge has completed. For this reason you will want to create a new workflow event using “ImageMerge Blob URL Success.” In this event you will then add the action “Save a Image Merge.”
Again, since uploading can take a few seconds depending on your image(s), we want to wait for an event trigger that tells us it’s completed. Create a new workflow event for ImageMerge Saved, and then inside of this event you can add whatever actions you need that will reference the newly generated Bubble URLs.
So to recap:
Run action Image a Image Merge from any event workflow.
Create ImageMerge Blob URL Success workflow and add Save a ImageMerge action.
Create ImageMerge Saved workflow and add desired actions that reference Bubble URLs.
