The "Image Editor" plugin is a simple and powerful image editor to be integrated into your application simply and quickly. Let your users create image transformations effortlessly! Its users can resize, crop, rotate and add various filters to any image.

➡️ Feel free to look at the example at the link: https://acampamentonocode-plugins.bubbleapps.io/version-test/image_editor

➡️ Feel free to look at the editor at the link: https://bubble.io/page?type=page&name=image_editor&id=acampamentonocode-plugins&tab=tabs-1


➡️ Instructions

To start using the "Image Editor" plugin, just follow the steps below and everything will work perfectly.

First, place a "Shape" element or a "Group" element on your page, set the element's width and height as you wish, the "Image Editor" container will always adapt to the size of this element. Then define an "ID Attribute" for this element.

Now place the "Image Editor" element on your page and in the element settings window you must provide some information, they are:

    Element ID: Here you must provide the "ID Attribute" that you defined in the "Shape" or "Group" element created in the first step.
    Image: Here you must provide the image to be edited. You can provide a dynamic value by placing a "Picture Uploader" or pulling a link from your database. It is also possible to create a repeater group for the user to edit their images. You are free to use it however it suits your use case.
    Default Tab Edit: Define here which tab should be open for the user when the page loads the "Image Editor". (Default: Adjust)
    Default Saved Image Type: Set here the default value of the file type that the image should be saved. (Default: png)
    Preview Quality: Set here the quality of the image preview in the editor. (Default: Medium)
    Save position: Set here the menu position to save the image. (Default: Left)
    Upload to Bubble?: Define here if the created image should be saved in the bubble database. If so, when the Bubble upload is finished, you can use the "Image Editor (Upload Complete)" function in your workflow to perform other actions you want in your application.
    Download Image?: Define here if the created image should be saved on the computer.

➡️ Status

When the user clicks the save button the plugin uploads this image to its database and adds the URL of this image to the "Image_url" status of your element. Use the "Image Editor (Upload Complete)" function to perform some action right after the bubble image upload is completed. You can save this url in your customer's database, open a popup with the edited image and etc. You are free to apply for your use case.

➡️ Functions

The plugin has only one function that can be used in the workflow. "Image Editor (Upload Complete)" is called right after the user saves the created image to their Bubble image bank.