How to set new image editor with custom crop ratio and use can't change it

[AkibDeraiya123]

Hey @junghwan-park ,
Thanks for really nice and helpful library.

@junghwan-park i want to achieve something like this.
When image editor is open i want to initialize direct crop menu. I can achieve this using initMenu: 'crop'. Once this crop is menu will be show,

1. i don't want to show it's suggestions(I mean crop suggestions like 16:9, 7:5, 3:2, custom). How can i achieve this?
2. I also want to show custom crop area(or aspect ratio like 5:1 or 2:1 or any others. This aspect ratio will automatically set on image and user can't change it. But user can drag it and set to different part of image. So, once user will click on apply button selected crop area will be automatically croped) by default in editor which i will pass into imageEditor configuration object or after configured some functions like imageEditor.crop(....).

In, short i want to initialize image editor with my custom crop ratio and which will by default set on image, this crop ratio user can't change.

Thanks

[jinwoo-kim-nhn]

In conclusion, you can use the imageEditorInstance.setCropzoneRect API.

• https://nhn.github.io/tui.image-editor/latest/ImageEditor#setCropzoneRect

1. Refer to [Example] (https://nhn.github.io/tui.image-editor/latest/tutorial-example02-useApiDirect) and recommend to implement custom UI using setCropzoneRect API.

2. With includeUI option included (not recommended)

• The first reason not recommended is that we do not officially offer subscriptions to menu change events. If only this part can be solved in another way, be handled using setCropzoneRect API.
• crop ui hidden.., You can override the css style to hide the submenu's UI.

Thank you for your inquiry. Internally, we will consider supporting more detailed options over time.

[AkibDeraiya123]

@jinwoo-kim-nhn
Thanks for answer. I am using setCropzoneRect method to set default cropper ration in image editor, but i don't want user to change that cropper ratio, then user can just use/crop another section of image(I mean user can change cropper area with the help of mouse, but can't change the ratio of cropper) to crop is if user wants.

It would be very helpful for me if you can share something with example, which is fixing this issue.

[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!

[AhmadOf]

Is this issue achievable because I want something like it to prevent user from drawing a rectangle with random aspect ratio while he is cropping the image but just he can use the initial one.

[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!

[konstantp]

Any updates on this issue?

[OriaLogic]

Hi,
I encountered the same problem, where I wanted to force my own ratio during the cropping process.

Remark : the solution is ugly because there is no callback prop on the component to know when the selected menu changes. It would be nice to add a onMenuChange: (newMenu: string) => void property.

I use the ImageEditor with React
I wanted the forced ratio to be applied everytime the user goes back to the crop menu, not only the first time.

Here's how I solved the problem :

export default function ImageFileUpload({ value, onChange, acceptedRatio }) {
  const [currentActiveMenu, setCurrentActiveMenu] = React.useState(null);

  useInterval(
    () => {
      if (!acceptedRatio) return; // I don't have a ratio to force

      // Building a listener to active menu changes
      // I use JQuery to check which menu is active
      const [el] = $('.tui-image-editor-menu .tui-image-editor-item.active'); 

      if (!el) return;

      const newActiveMenu = el.className.split('tie-btn-')[1].split(' ')[0];
      if (newActiveMenu === currentActiveMenu) return;

      setCurrentActiveMenu(newActiveMenu);

      if (newActiveMenu !== 'crop') return;

      // If it is the crop menu, I try to set the cropzone to my own ratio 
      // My ratio shape is like '16:9' 
      const [width, height] = acceptedRatio.split(':');
      try {
        editorInstance.setCropzoneRect(
          parseInt(width, 10) / parseInt(height, 10)
        );
      } catch (e) {
        console.error(e);
      }
    },
    // Delay in milliseconds
    300
  );


  return (
    <div
      className={classNames('image-file-upload', {
        'has-preset-ratio': !!acceptedRatio,
      })}
    >
      <ImageEditor ... />
    </div>
  )
}

And the CSS part :

.image-file-upload {
  &.has-preset-ratio {
    .tui-image-editor-container .tui-image-editor-submenu {
      height: unset;
      padding-bottom: 10px;

      .tui-image-editor-menu-crop
        .tui-image-editor-submenu-item
        li:not(.tie-crop-button.action) {
        display: none;
      }
    }
  }
}

The result