Cropper Component Save and Add

UI Builder
1

Hi team,

Thanks for including the Cropper Component. Really appreciate it. I would like to use the component but configure my own buttons. Especially since the cropper Component will be small (profile pic) and the default buttons at the top and bottom wrap and are constrained within the cropper container. I would prefer to manage the location of the Add, Clean and Save buttons myself.

image
image587×529 47.5 KB

If I select to not show the top buttons. How do I use codeless to create the Add Image functionality and the Save functionality using my own buttons?

I do not see any Cropper Action in Codeless to Add an Image by showing the local device file browser window.

Also for me to create my own Save button, I think I use the Get Cropped Canvas from Cropper action in Codeless which returns HTMLCanvasElement. Can you tell me how to get the Crop image which I thought should be a Blob from the Cropper component and send it to Backendless storage using File APIs (Save File? or something else).

image

Really appreciate that the Cropper component now exists with so many features but I would like to control its user interface a little more. Particularly the Add/Get image and Save image actions/buttons.

Any help on this is much appreciated.

Thanks
Glenn

2

Hello @Glenn_D

Thanks for including the Cropper Component. Really appreciate it. I would like to use the component but configure my own buttons. Especially since the cropper Component will be small (profile pic) and the default buttons at the top and bottom wrap and are constrained within the cropper container. I would prefer to manage the location of the Add, Clean and Save buttons myself.

Unfortunately, this functionality doesn’t exist for now but thank you for the proposal. We created an internal ticket to implement that and will notify you when it will be done(BKNDLSS-31638). As a temporary solution, we could offer you to use our buttons but style them using Less variables or raw CSS.

Also for me to create my own Save button, I think I use the Get Cropped Canvas from Cropper action in Codeless which returns HTMLCanvasElement. Can you tell me how to get the Crop image which I thought should be a Blob from the Cropper component and send it to Backendless storage using File APIs (Save File? or something else).

As for creating your own Save button, you can use the Custom Code block. Below is the logic which you could use to achieve that.

save_image_logic
save_image_logic922×490 21.3 KB

<block xmlns="http://www.w3.org/1999/xhtml" type="create_file" id="Fd_yuzoBs2zr*:kUKjdP" x="116" y="141"><mutation has_output="false"></mutation><field name="connections_toggler">FALSE</field><value name="file_path"><shadow type="text" id="MCXk+GiV.*#l`$aq3y1Y"><field name="TEXT">/</field></shadow></value><value name="file_name"><shadow type="text" id="2{|6{S.nhtYtg(Spa^ME"><field name="TEXT">cropped_image.png</field></shadow></value><value name="file_content"><shadow type="text" id=";C_QU;)tA5M33jnV{o(*"><field name="TEXT"></field></shadow><block type="custom_js_code" id="L-SvVN6;0][u3P`2|td7"><mutation output="true"><arg arg-name="canvas"></arg><code>"const saveImage = async canvas =&gt; {\r\n  const croppedCanvasURL = canvas.toDataURL();\r\n  const response = await fetch(croppedCanvasURL);\r\n  const blob = await response.blob();\r\n  \r\n  return blob;\r\n};\r\n\r\nreturn saveImage(canvas);\r\n\r\n\r\n"</code></mutation><field name="name">canvas</field><value name="canvas"><block type="ui_custom_component__c_8742f14bae0de4b46c59cd430a8d5ca4__getCroppedCanvas" id="`3@?uP)VMc_LV]lCl+bH" bl_meta="{&quot;label&quot;:&quot;Cropper Component Action - Get Cropped Canvas&quot;}"><mutation has_output="true"></mutation><field name="componentUid">'7076f76f70469c7505dfd5ae2faec4b6'</field><field name="connections_toggler">TRUE</field></block></value></block></value><value name="overwrite"><shadow type="logic_boolean" id="o$o/)3|G2Z56C.Bm(TkR"><field name="BOOL">TRUE</field></shadow></value></block>

Code inside Custom Code block

const saveImage = async canvas => {
  const croppedCanvasURL = canvas.toDataURL();
  const response = await fetch(croppedCanvasURL);
  const blob = await response.blob();
  
  return blob;
};

return saveImage(canvas);

Regards, Serhiy.

3

Hello @Glenn_D ,
The cropper component has been updated. New actions and properties have been added in the new version.
New Properties:

  • Add Image Button Label
  • Clean Button Label
  • Save Button Label
  • Download Button Label

New Actions:

  • Upload Image to Cropper
  • Get Cropped Image Content from Cropper
  • Remove Image from Cropper
4

Hi @Bohdan_Vynarchuk and @Serhiy_Melnychuk ,

Thank you for the update on the Cropper Component particularly the “Get Cropped Image” and “Upload Image to Cropper” actions. I have been trying to use the component but I don’t think in its current configuration it will work for me. Can I ask your advice or help on the below issue please?

I want the Cropper tool to scale the image within a defined image size. I don’t know of anyway to force the cropper component to show the image and crop functionality within a given pixel size of width x height. I placed the cropper in a block with the width and height set to 300x300. I put a border around the block component to show it.

image
image808×957 38.4 KB

Next I open an image that is higher than it is wider and the cropper component keeps the scale of the image and goes outside the block size of 300x300 and extends the image over the buttons.

image
image790×950 69 KB

I would really appreciate if you could tell me if it is possible to configure the cropper component in UI Builder to look like the below image and maintain an image within a fixed size view similar to the below diagram. In this case 300x300. Note the crop edge demonstrated here is only for show. My Question focuses on maintaining the image and crop within a defined width and height

image
image521×660 40.1 KB

Any help is much appreciated. Thank you.

5

Hi, @Glenn_D

To configure the Cropper component to scale an image to a given size, you must add an EXTENSION on the THEME tab.

There are two variables that specify the size of the component:

@bl-customComponent-cropper-width: 100%;
@bl-customComponent-cropper-maxHeight: 80vh;

In your case, it will be enough to set

@bl-customComponent-cropper-maxHeight: 100%;

Regards, Serhiy.