# Image Cropper - New Plugin **URL:** \ **Category:** Showcase\ **Created:** [May 31, 2019, 11:36pm UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182 "2019-05-31T23:36:39Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![steven.junio91](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@steven.junio91](https://forum.bubble.io/u/steven.junio91)\ **Post date:** [May 31, 2019, 11:36pm UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/1 "2019-05-31T23:36:39Z")
This is a highly customizable Desktop and mobile friendly Image Cropper. It’s based on [Cropper.js](https://github.com/fengyuanchen/cropperjs/blob/master/README.md) [Demo Page - https://cropper.bubbleapps.io/version-test](https://cropper.bubbleapps.io/version-test) [Editor](https://bubble.io/page?type=page&name=index&id=cropper&test_plugin=1559094386979x605571718542786600_current&tab=tabs-1) Plugin Page - [https://bubble.io/plugin/image-cropper-1559094386979x605571718542786600](https://bubble.io/plugin/image-cropper-1559094386979x605571718542786600) This Cropper has 4 different styles and 14 different customization options. **How to use** 1. Put the Cropper Element on your page. 2. Fill out the properties however you want. 3. To get your Cropped image, run the “Get Cropped Image” action. 4. Access the cropped Image in the elements “Cropped Image” state 5. Upload the Cropped image using the “Upload Cropped Image” action 6. Access the Uploaded Cropped Image in the elements state “Uploaded Image” Update the Cropper elements image source by running the action “Set Image Source” and provide the image source in the property editor. **Notes** You must always run the “Get Cropped image” workflow before you run the “Upload Cropped Image” action. You can do them in the same workflow. Do NOT try to create a Bubble Data Object with “Cropped Image” state. It will cause your application to slowdown significantly. ALWAYS make sure you use the “Uploaded Cropped Image” state for creating an object in the database. [![](https://firebasestorage.googleapis.com/v0/b/tubey-the-tubeman-c4148.appspot.com/o/Image%20Cropper.gif?alt=media&token=861f3938-6d84-4b59-9951-55774dba7573) ](https://firebasestorage.googleapis.com/v0/b/tubey-the-tubeman-c4148.appspot.com/o/Image%20Cropper.gif?alt=media&token=861f3938-6d84-4b59-9951-55774dba7573) ---
**Author:** ![sudsy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sudsy/32/114637_2.png) [@sudsy](https://forum.bubble.io/u/sudsy)\ **Post date:** [June 1, 2019, 12:09am UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/2 "2019-06-01T00:09:52Z")
Nice! ---
**Author:** ![clinton1](https://avatars.discourse-cdn.com/v4/letter/c/e8c25b/32.png) [@clinton1](https://forum.bubble.io/u/clinton1)\ **Post date:** [June 7, 2019, 4:32pm UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/3 "2019-06-07T16:32:55Z")
Hey so I just subscribed to this plugin and it’s great except… it says you can completely lock the cropbox but I’m not seeing how to do that. Even when setting “Resizeable Cropbox” to “no” it still lets the user create their own cropbox and eliminates the established ratio. Am I missing something? This is kinda the whole reason I wanted this plugin… ---
**Author:** ![steven.junio91](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@steven.junio91](https://forum.bubble.io/u/steven.junio91)\ **Post date:** [June 7, 2019, 10:21pm UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/4 "2019-06-07T22:21:26Z")
@clinton1 I just pushed a fix for the “Drag Mode” which should solve your problem. See the example I set up here: [Bubble Application](https://cropper.bubbleapps.io/version-test/locked_crop_box) and the editor with the settings here: [Cropper | Bubble Editor](https://bubble.io/page?type=page&name=locked_crop_box&id=cropper&tab=tabs-1) You’ll want to set; Aspect ratio to your desired ratio. The “Drag Mode” property be “Move” or “None” . And set the the “Resizable Crop Box” property to be No. ![48%20PM](https://us1.discourse-cdn.com/bubble/original/3X/c/5/c5aaf814a1cbb5d44e6f3bcbfb17a0100b3ff575.png) ![36%20PM](https://us1.discourse-cdn.com/bubble/original/3X/8/1/818e94520428745898f2248cd6293a96c8f1747e.png) ---
**Author:** ![JonL](https://avatars.discourse-cdn.com/v4/letter/j/e5b9ba/32.png) [@JonL](https://forum.bubble.io/u/JonL)\ **Post date:** [June 7, 2019, 11:24pm UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/5 "2019-06-07T23:24:58Z")
Nice plugin. An easy toggle to set cropping to rounded as in this example would be a good addition. [https://fengyuanchen.github.io/cropperjs/examples/crop-a-round-image.html](https://fengyuanchen.github.io/cropperjs/examples/crop-a-round-image.html) A lot of people ask how to crop rounded photos for profile pics and others. ---
**Author:** ![steven.junio91](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@steven.junio91](https://forum.bubble.io/u/steven.junio91)\ **Post date:** [June 8, 2019, 2:27am UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/6 "2019-06-08T02:27:46Z")
Yep thought this as well. I’ll add this to my list. ---
**Author:** ![onfyre](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/onfyre/32/231412_2.png) [@onfyre](https://forum.bubble.io/u/onfyre)\ **Post date:** [October 17, 2019, 4:44am UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/7 "2019-10-17T04:44:35Z")
Great plugin. Just wondering if anyone knows how to make resizing on mobile work? In the demo gif above it appears to be working on mobile but my install and the demo page both don’t zoom/resize on mobile. ---
**Author:** ![steven.junio91](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@steven.junio91](https://forum.bubble.io/u/steven.junio91)\ **Post date:** [October 17, 2019, 8:04pm UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/9 "2019-10-17T20:04:14Z")
Just pushed a fix for this. ---
**Author:** ![steven.junio91](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@steven.junio91](https://forum.bubble.io/u/steven.junio91)\ **Post date:** [December 8, 2019, 11:52pm UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/10 "2019-12-08T23:52:27Z")
V1.3.0 Added the ability to Rotate an Image in the Cropper ---
**Author:** ![lameyer90](https://avatars.discourse-cdn.com/v4/letter/l/8baadc/32.png) [@lameyer90](https://forum.bubble.io/u/lameyer90)\ **Post date:** [May 1, 2020, 4:35pm UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/11 "2020-05-01T16:35:13Z")
Thanks for all the instructions so far! I am trying to set up a cropping tool as part of a form that will be submitted by users (all the data will be posted into a forum, with a photo as part of the submission so I need the user to create standard dimensions for photos). I followed the steps above but continue to get this error when the image cropper tries to “get” the image from the source: ![Screen Shot 2020-05-01 at 11.29.47 AM](https://us1.discourse-cdn.com/bubble/original/3X/7/1/71c9e6b2ec888481c46cd801f54db5c2ea8c775d.png) Any suggestions? ---
**Author:** ![lameyer90](https://avatars.discourse-cdn.com/v4/letter/l/8baadc/32.png) [@lameyer90](https://forum.bubble.io/u/lameyer90)\ **Post date:** [May 1, 2020, 4:55pm UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/12 "2020-05-01T16:55:13Z")
Update to above. I changed the workflow to update set source of image cropper when the photo uploader value was changed and still no luck. Getting a similar but different error message ![Screen Shot 2020-05-01 at 11.51.58 AM](https://us1.discourse-cdn.com/bubble/original/3X/7/b/7b18fbfd74588c3618ff188fba3a8b7ff06a7254.png) ---
**Author:** ![steven.junio91](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@steven.junio91](https://forum.bubble.io/u/steven.junio91)\ **Post date:** [May 1, 2020, 10:06pm UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/13 "2020-05-01T22:06:24Z")
Please send me a screenshot of the workflows and the cropper element itself. I’ll look into it some more. ---
**Author:** ![steven.junio91](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@steven.junio91](https://forum.bubble.io/u/steven.junio91)\ **Post date:** [May 1, 2020, 10:06pm UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/14 "2020-05-01T22:06:59Z")
Please send me a screenshot of the workflows and the cropper element itself. I’ll look into it some more. ---
**Author:** ![lameyer90](https://avatars.discourse-cdn.com/v4/letter/l/8baadc/32.png) [@lameyer90](https://forum.bubble.io/u/lameyer90)\ **Post date:** [May 3, 2020, 2:08am UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/15 "2020-05-03T02:08:39Z")
Hi Steven, thanks for helping out. Here are the screenshots of the photo input form/cropper and the place where the image is supposed to show up. ![Screen Shot 2020-05-02 at 9.04.19 PM](https://us1.discourse-cdn.com/bubble/original/3X/d/7/d7670af792112735df642ba7fc786c8e6f1df167.png) ![Screen Shot 2020-05-02 at 9.04.49 PM](https://us1.discourse-cdn.com/bubble/original/3X/4/2/421778c54a3a479e4264b5d1cca60e349932b589.png) ---
**Author:** ![lameyer90](https://avatars.discourse-cdn.com/v4/letter/l/8baadc/32.png) [@lameyer90](https://forum.bubble.io/u/lameyer90)\ **Post date:** [May 3, 2020, 2:09am UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/16 "2020-05-03T02:09:40Z")
And here are the workflow screenshots ![Screen Shot 2020-05-02 at 9.04.06 PM](https://us1.discourse-cdn.com/bubble/original/3X/1/9/191d617911f743f6e6736fb23bfa9581a9ddf08e.png) ![Screen Shot 2020-05-02 at 9.03.45 PM](https://us1.discourse-cdn.com/bubble/original/3X/8/5/85fbe0e76ad85b2c378c205ae549beba4fa1da78.png) ![Screen Shot 2020-05-02 at 9.03.36 PM](https://us1.discourse-cdn.com/bubble/original/3X/7/e/7e9fc387efe70d593cd6052097000dae62598099.png) ![Screen Shot 2020-05-02 at 9.03.23 PM](https://us1.discourse-cdn.com/bubble/original/3X/2/6/262add3a85ab6661c2c2b5a7ca8aaaf625262039.png) ---
**Author:** ![lameyer90](https://avatars.discourse-cdn.com/v4/letter/l/8baadc/32.png) [@lameyer90](https://forum.bubble.io/u/lameyer90)\ **Post date:** [May 3, 2020, 2:11am UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/17 "2020-05-03T02:11:00Z")
Also as an update to above: I’m no longer getting the error and the image is showing in the cropper viewport but it is not saving to the “Idea” element as intended ---
**Author:** ![steven.junio91](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@steven.junio91](https://forum.bubble.io/u/steven.junio91)\ **Post date:** [May 6, 2020, 4:27am UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/18 "2020-05-06T04:27:12Z")
> [@lameyer90](#): > > Update to above. I changed the workflow to update set source of image cropper when the photo uploader value was changed and still no luck. Getting a similar but different error message You’ll have to switch up your workflow using the Trigger action “A Cropper Image is Uploaded” See the example here: [Cropper | Bubble Editor](https://bubble.io/page?type=page&name=example&id=cropper&tab=tabs-2) ![image](https://us1.discourse-cdn.com/bubble/original/3X/3/b/3b364d565d6fc324e7550f84a37eff2605c4a29d.png) ---
**Author:** ![lameyer90](https://avatars.discourse-cdn.com/v4/letter/l/8baadc/32.png) [@lameyer90](https://forum.bubble.io/u/lameyer90)\ **Post date:** [May 6, 2020, 4:37am UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/19 "2020-05-06T04:37:43Z")
This worked!! Thanks so much ---
**Author:** ![paul.dalpozzo](https://avatars.discourse-cdn.com/v4/letter/p/ecb155/32.png) [@paul.dalpozzo](https://forum.bubble.io/u/paul.dalpozzo)\ **Post date:** [June 8, 2020, 8:19pm UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/20 "2020-06-08T20:19:27Z")
Hi, we are using your plugin to crop two images on a user registration page. One for a profile picture and another for a background image like in LinkedIn or FB. The profile is working but the background is creating the following error as it attempts to crop the image. Both workflows are the same. ![Cropper broken 2020-06-08](https://us1.discourse-cdn.com/bubble/original/3X/6/a/6a593009f2805c04c4dd86b57d52f6f969460bf1.png) ---
**Author:** ![steven.junio91](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@steven.junio91](https://forum.bubble.io/u/steven.junio91)\ **Post date:** [June 9, 2020, 4:21pm UTC](https://forum.bubble.io/t/image-cropper-new-plugin/58182/21 "2020-06-09T16:21:50Z")
This is related to placing multiple Croppers on the same page. I’ve pushed the fix and now I’m just working with Bubble to get the version approved. [Next page](https://forum.bubble.io/t/image-cropper-new-plugin/58182.md?page=2)