Cropping tool for Images

#1 · January 8, 2022, 8:33 pm

Hello and Happy new year,

I like to know if it possible to have a plugin for VisualNeo Web that is cropping an image. I try to make a web page that will work with fabric plugin but I like before insert an image to can crop it.

I found this javascript that is free https://fengyuanchen.github.io/cropper/. It is exactly what I need.

Is that possible?

#2 · January 9, 2022, 1:02 pm

@sakismor yes, I think it's possible, but will take some time.

Regards.

#3 · January 9, 2022, 7:03 pm

Thank you for your quick answer.

When you say sometime ... you mean some days or some months?

Sorry if I press you. Just is the first part of my project and I need to know.

Thank you

#4 · January 9, 2022, 9:52 pm

@sakismor I don't know. I have not said I will do it... yet. I have recently added a lot of updates and will concentrate on samples, documentation and other important projects for now. Anyway I will try to find time to take a close look to that library as it seems quite interesting. I will keep you informed.

Thank you for your understanding.

Regards.

#5 · January 10, 2022, 4:44 am

For cropping I use Irfanview which has many great features including cropping. https://www.irfanview.com/

If you're looking to crop within your page then I am thinking moving the image inside a container as a work around?

#6 · January 11, 2022, 2:27 pm

Thank you for your answer.

Is it possible to use it in a Visual web Container? And to upload as a web page?

#7 · January 24, 2022, 10:39 am

@sakismor I have a working prototype. I hope to finish it within this week.
You will get the cropped image as a Base64 encoded JPG or PNG. You will be able to show it within a Container.
Regards.

Vadim has reacted to this post.

#8 · January 24, 2022, 10:55 am

Ohh thank you.

That is great news. It is based on the cropper that I send you the link? Or something different?

Really thank you

#9 · January 24, 2022, 10:56 am

That is great news. It is based on the cropper that I send you the link? Or something different?

@sakismor yes, it's :)

#10 · January 25, 2022, 1:27 pm

@sakismor, I have already finished basic functionality:

neoCrop Sample App:
https://visualneo.com/tutorials/neocrop

Let me know if you miss any important feature on the sample app.
Thank you!

Vadim, CDY@44 and 2 other users have reacted to this post.

#11 · January 25, 2022, 1:38 pm

Great!
It will be useful

Thank you Luis

#12 · January 25, 2022, 8:52 pm

@luishp

Great, it works very nicely!!!

#13 · January 26, 2022, 3:07 am

This is cool. Can you preset cropping area and image? Wuld be cool to be able to crop a container. But that might not be doable.

#14 · January 26, 2022, 4:08 am

@luishp

Looks great.

a) Is it possible to have the cropped image (wireframe) have a different aspect ratio than the original image ?

b) Can an original image be cropped via script ? e.g. split an image into a grid made up of x by y parts, so each part can then be loaded into a separate container

#15 · January 26, 2022, 7:58 am

Hi @neal-stone and @gaev

Is it possible to have the cropped image (wireframe) have a different aspect ratio than the original image?

Yes, you can define whatever aspect ratio: 1/1, 16/9, 1280/720...

Can an original image be cropped via script ? e.g. split an image into a grid made up of x by y parts, so each part can then be loaded into a separate container

Not right now, but I will study the possibilities.

Would be cool to be able to crop a container. But that might not be doable.

It's already doable by code using transform property (translation and scale) or using neoPanZoom plugin. Although not as easy as with this plugin. neoCrop only works on images.

Regards.

Best regards.

#16 · January 26, 2022, 3:57 pm

@luishp

Yes, you can define whatever aspect ratio: 1/1, 16/9, 1280/720...

I should have checked their demo page ... it was right there ... sorry.

Not right now, but I will study the possibilities.

Took a look at the documentation in github ... in addition to ...

move(offsetX[, offsetY])

.. method, it also offers ...

moveTo(x[, y])

#17 · January 26, 2022, 6:12 pm

Hello

I found a problem that when you crop the image it keeps the out place of the image and it make it black.

Is it possible to zoom in and zoom out the image?

And the quality of the croping image will be OK or will lost quality?

Is it possible to save the croping image to the server?

I am really thank you for your try.....

#18 · January 26, 2022, 6:34 pm

I found a problem that when you crop the image it keeps the out place of the image and it make it black.

@sakismor You will have to adapt your app to the image size to avoid that.

Is it possible to zoom in and zoom out the image?

I will try to add it.

And the quality of the croping image will be OK or will lost quality?

Will be ok. No lost of quality

Is it possible to save the croping image to the server?

You can send the image as a base64 encoded image.

Took a look at the documentation in github ... in addition to ...

@gaev I will try to add them to the plugin.

Thank you all.

Vadim, farhad2008 and CDY@44 have reacted to this post.

#19 · January 27, 2022, 2:05 pm

@sakismor @gaev

I have updated the sample app. I think all the issues have been fixed and the wishes are included now.
Remember to press Ctrl-F5 to force a full reload.

neoCrop Sample App:
https://visualneo.com/tutorials/neocrop

Let me know what you think.
Thank you!

Vadim and CDY@44 have reacted to this post.

#20 · January 27, 2022, 2:23 pm

Working like a charm. All issue I think fix it.

The only question is how to save into the server. Please if you delivery the new plugin I will need in the sample to save at the server.

Best regards and THANK YOU

Cropping tool for Images - Forum

Cropping tool for Images