ImageEditor resize(...) method doesn't seem to resize the image

[Bill Rebey]

I'm trying to resize images with the ImageEditor, and I'm not having much luck.

This code:

    letdims:Dimension=this.sfImageEditor.getImageDimension();
    console.log(`Init dims: ${dims.width} x ${dims.height}`);
    this.sfImageEditor.resize(50, 50, true);
    dims=this.sfImageEditor.getImageDimension();
    console.log(`Final dims: ${dims.width} x ${dims.height}`);

Produces these results (from Chrome Dev Tools):

Resizing
Init dims:314.66666666666663 x 236
Final dims:314.66666666666663 x 236

ALSO, there isn't any documentation on how "true" works for the isAspectRatio argument.  Specifically, it doesn't say which dimension (Widht?  Height?Largest?Smallest?) the resizer will usewhen keeping the aspect ratio,while making the other dimension fit as needed.  All3 arguments are required.   Anyone have any insight into what I'm doing wrong here?

[Buvana Sathasivam]

Hi Bill Rebey,

Thank you for reaching out to Syncfusion support.

Query #1: "I'm trying to resize images with the ImageEditor, and I'm not having much luck."

The resize method requires you to specify the width and height arguments for resizing. However, please note that this resizing change will not reflect on the UI. The updated dimensions will only appear after the image is saved.

Query #2: "There isn't any documentation on how 'true' works for the isAspectRatio argument. Specifically, it doesn't say which dimension (Width? Height? Largest? Smallest?) the resizer will use when keeping the aspect ratio while making the other dimension fit as needed."

Apologies for the inconvenience caused. When the isAspectRatio property is enabled, the height value is adjusted based on the specified width. We understand the need for this clarification and will update our documentation in an upcoming release to provide more detailed information on how the aspect ratio works.

For your reference, you can view the documentation for resizing here: Resize Documentation

Query #3: "All 3 arguments are required."

To clarify, in the resize method, the width and height arguments are mandatory, while the isAspectRatio argument is optional. Please refer to the API link below for further details on the resize method: API Documentation

If you have any further questions or need additional assistance, please feel free to reach out to us.

Regards,

Buvana S

[Bill Rebey]

Thank you for that information.  I appreciate your response.

After more fiddling with the ImageViewer, I don't think it's reporting what I think anyway.  The image that I'm populating the ImageViewer with is a 640x480 Web Cam image.  Yet after loading the image data into the ImageEditor, the getImageDimension() call reports those strange " 314.66666666666663 x 236" values.

What is going on there?  What is that actually reporting?  It kind of feels like it might have more to do with the size of the visually-displayed version of the image on the screen, rather than the real image size.  Can you shed any light on that?

As for the image size not changing until it's saved, that might mean that this solution won't work for me.  The image will not be saved, at least not to the user's local storage.  

What I was intending to do was this:

• Load a WebCam or Phone Cam image into the ImageEditor
• Call resize() on it to standardize the image size (and in the case of phone cams, greatly reduce the image size)
• Let the user edit the image in the editor
• When the user is done editing and happy with the captured/modified image, he'll click a "Done Editing" button external to the ImageEditor
• Finally, I would extract the modified (resized and user-edited) image data from the ImageEditor with "getImageData()", then send that data to an API to be stored by the server

Is this control not capable of that functionality?  Can the resizing and edits not be applied until the image is saved locally to the user's personal storage space? 

....or is there a way to use ImageEditor to do what I want?

Thanks again for your help!

[Buvana Sathasivam]

Hi Bill,

Thank you for your follow-up.

When you load an image into the ImageEditor, the dimensions reported by the getImageDimension() method reflect the rendered size of the image on the canvas, not the original image's size. This explains why you are seeing values like 314.67 x 236, as these correspond to the image's scaled size within the editor rather than its actual dimensions. The method reports the image’s viewport size, which adjusts based on how the editor displays the image.

Regarding your workflow, you can still achieve your goal without needing to save the image locally. The ImageEditor allows you to resize and modify the image, and once the user is done editing, you can retrieve the modified image using the getImageData() method. It simply provides the modified image's information, such as pixel data and properties. You can then process this data, convert it into a format suitable for upload, and send it to your server via an API.

Here’s an example of how you can resize the image and retrieve the modified data:

Sample Code & Demo Link

After clicking "Done Editing," the getImageData() method will return the image data, which you can then use to send the image to your API for storage on the server.

Let us know if you need any further assistance with this!

Regards,

Buvana S

[Bill Rebey]

Thank you for the explanation, and for the example, which works perfectly and does precisely what I am seeking to achieve.  I appreciate the effort!

[Buvana Sathasivam]

Hi Bill,

We're thrilled to hear that the example worked perfectly for your needs. If you have any further questions or need additional assistance, please don't hesitate to reach out.

Regards,

Buvana S