I want to customize the ratio crop, such as 16:10 or 2:1

[baobeiqie]

Summary
I want to customize the ratio crop, such as 16:10 or 2:1, how to do it. thanks

Version
3.15.2

[Elli-Jeon]

add imageEditor.setCropRatio before imageEditor.crop(imageEditor.getCropRatio) this line

[reference] (http:https://nhn.github.io/tui.image-editor/latest/ImageEditor#setCropzoneRect)

[baobeiqie]

I'm so sorry, I didn't understand.can you help me。

1. I mean, how about adding a 16:10 here。
   
   2.I modified the code at line 379 of this link【https://github.com/nhn/tui.image-editor/blob/44cec555b177ee6e9807c376dff5a054b4fe9f95/apps/image-editor/examples/js/service-basic.js#L403】，
   Here is my code, but there is a problem.

$btnCrop.on('click', function () {
imageEditor.startDrawingMode('CROPPER');
$displayingSubMenu.hide();
$displayingSubMenu = $cropSubMenu.show();
imageEditor.setCropRatio(1.25);
});

[Elli-Jeon]

@baobeiqie

Good day.

There are three crop buttons in service basic.js file.

btnCrop.on, btnCropApply lastly, btnCropCancel

if u click $btnCrop, then cropper drawingmode starts, and submenu wii appear.

$btnCrop.on('click', function () {
  imageEditor.startDrawingMode('CROPPER');
  $displayingSubMenu.hide();
  $displayingSubMenu = $cropSubMenu.show();
});

after putting 16:10 button in submenu. Add event listner.

$16:10Btn.on('click', () => {
  imageEditor.setCropzoneRect(16/10); 
})

and then click btnCropApply to end the cropper drawing mode.

Hope this will help u.

[baobeiqie]

OK, thank you very much. I understand.

[stale]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale]

This issue will be closed due to inactivity. Thanks for your contribution!