All Plugins
Group to Image (Screenshot)
Free
Convert any Bubble Element into a high-resolution image. Choose between JPEG or PNG
About
[center][b]Create ultra high-resolution images of any given element with our Element DOM to Image plugin.[/b] This powerful library transforms group elements into raster images, supporting both PNG and JPEG formats.[/center] [b]Key Features:[/b] [ml][ul][li indent=0 align=left][b]High-Resolution Image Generation:[/b] Capture ultra high-resolution images of any DOM element, ensuring every detail is preserved.[/li][li indent=0 align=left][b]Flexible Render Options:[/b] Choose between JPEG and PNG formats to suit your needs and preferences for the final image output.[/li][li indent=0 align=left][b]Customizable Image Scale:[/b] Adjust the scale of the image by setting the Device Pixel Ratio, allowing you to control the final image size and resolution with precision.[/li][li indent=0 align=left][b]Seamless Integration:[/b] Easily integrate the Element DOM to Image plugin into your Bubble.io projects without the need for complex coding or technical expertise.[/li][li indent=0 align=left][b]User-Friendly Interface:[/b] Intuitive and easy-to-use interface ensures that even users with minimal technical background can leverage the plugin's capabilities effectively.[/li][li indent=0 align=left][b]Comprehensive Documentation:[/b] Extensive documentation guides you through every step of using the plugin, making it simple to navigate and utilize all its features.[/li][/ul][/ml] [b]Unlock the full potential of your Bubble.io application with the Element DOM to Image plugin.[/b] Effortlessly convert any element into high-resolution images, enhancing the visual appeal and functionality of your projects. Start creating stunning images today with the Element DOM to Image plugin. [ml][ul][li indent=0 align=left][b]Demo:[/b] [u][color=rgb(0, 102, 204)]https://plugins.datamaticsoftware.com/dom-to-image[/color][/u][/li][li indent=0 align=left][b]Documentation:[/b][u][color=rgb(0, 102, 204)] https://plugins.datamaticsoftware.com?plugin=dom-to-image[/color][/u][/li][/ul][/ml]
Setup Instructions
This are step-by-step instructions on how to get the plugin working on any Bubble App.
[ml][ol][li indent=0 align=left]Add this plugin to your application.[/li][li indent=0 align=left]Add a Workflow action, for example 'When a button is clicked'.[/li][li indent=0 align=left]Search in the actions for [i]Element DOM to Image[/i].[/li][li indent=0 align=left]Go to Settings, then go to General -> General Appearance and check the option Expose the option to add an ID attribute to HTML elements.[/li][li indent=0 align=left]Go to the Design tab and select any element. Scroll to the bottom of the Property Editor and define an ID (for example group_1).[/li][li indent=0 align=left]Go back to Workflow tab and write the ID you just defined in the [i]Element DOM to Image[/i] Action, under Element ID property.[/li][li indent=0 align=left]Define a file name for the image (for example my_image) but don't add extension.[/li][li indent=0 align=left]Select a render option (for example jpeg).[/li][li indent=0 align=left]Set the scale of the rendering (for example 7)[/li][li indent=0 align=left]Run the Workflow Action and the image will automatically download into local storage.[/li][/ol][/ml]
Full Documentation
[b]Element to Image (Action)[/b] is the only action given in this plugin. You need to call the action in the Workflow to convert to an image any given element by ID.
This action contains the following properties to be used: [ml][ul][li indent=0 align=left][b]Element ID:[/b] the defined ID of a Bubble element. To be able to add an ID to the element you will first need to expose the option in Settings -> General -> General Appearance[/li][/ul][/ml][quote][indent data=1][color=rgb(136, 136, 136)]The ID global attribute defines an identifier (ID) which must be unique in the whole document as defined by [/color][color=rgb(0, 102, 204)][url=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id]Mozilla[/url][/color][/indent][/quote] [ml][ul][li indent=0 align=left][b]File Name:[/b] set the name of the file. Don't include extension like .png or .jpg[/li][li indent=0 align=left][b]Render Option:[/b] select between png, jpeg in which will be the format the image will be rendered.[/li][li indent=0 align=left][b]Scale:[/b] a number indicating image scaling resolution quality. The higher the number the higher the image size and resolution of the element, which will also increase it's storage size.[i] Default is 7.[/i][/li][/ul][/ml] After running the action in the workflow, the image will automatically download into the user's local Downloads.
[b]Element to Image[/b] is the only Element given in this plugin. Add this element into your Editor to manipulate the image internally in your app (it won't download automatically any image). Useful to store the image in Database or to save it for later use.
The element contains the following properties to be used: [ml][ul][li indent=0 align=left][b]Element ID:[/b] the defined ID of a Bubble element. To be able to add an ID to the element you will first need to expose the option in Settings -> General -> General Appearance[/li][/ul][/ml][quote][indent data=1][color=rgb(136, 136, 136)]The ID global attribute defines an identifier (ID) which must be unique in the whole document as defined by [/color][url=] [ml][ul][li indent=0 align=left][b]File Name:[/b] set the name of the file. Don't include extension like .png or .jpg[/li][li indent=0 align=left][b]Render Option:[/b] select between png, jpeg in which will be the format the image will be rendered.[/li][li indent=0 align=left][b]Scale:[/b] a number indicating image scaling resolution quality. The higher the number the higher the image size and resolution of the element, which will also increase it's storage size.[i] Default is 7.[/i][/li][/ul][/ml] To successfully get the Image element, you will also need to run the [i]Get ElementDomtoImage[/i] Action, which will become available under [i]Element Actions[/i] when a Element Dom to Image element is present.