Crop settings with fixed width/height not working

[mtmsFKoechl]

Hello,

I'm new to your nice image editor and tried to create a vue component with it.
But I run into some issues.

1. When I set "minWidth"/"maxWidth" and "minHeight"/""maxHeight" to the same value, the crop area won't work as expected.
   
   
   
2. The zoom menu is disabled in the cropping tool and I can't find a way to activate it.
3. My img size is 1536x864 and the size in the header says "948 x 1265 px".
   
4. I don't find an option to hide the save btn. I don't need it because the component will be used in different places with their own btns.

Is there any posibility to rotate the img without having to rotate the crop area too?

Here is my demo code:

ImageEditorDemo.vue

<template>
  <ImageEditor
      ref="editor"
      :config="config"
      init-on-rendering
      debug-mode
  />
</template>

<script setup lang="ts">
import ImageEditor from '@/Components/ImageEditor/ImageEditor.vue';
import FilerobotImageEditor from 'filerobot-image-editor';
import {ImageEditorConfigDto} from '@/Dtos/ImageEditorConfigDto';
import {ref} from 'vue';

const editor = ref<InstanceType<typeof ImageEditor>>();

const {TABS, TOOLS} = FilerobotImageEditor;
const config: ImageEditorConfigDto = {
  previewPixelRatio: 0,
  savingPixelRatio: 0,
  source: '../../../../demo/Demo.png',
  useBackendTranslations: false,
  Crop: {
    minWidth: 225,
    minHeight: 300,
    maxWidth: 225,
    maxHeight: 300,
    ratio: 'custom',
    noPresets: true,
  },
  tabsIds: [TABS.ADJUST, TABS.RESIZE, TABS.FILTERS, TABS.FINETUNE, TABS.ANNOTATE, TABS.WATERMARK],
  defaultTabId: TABS.ADJUST,
  defaultToolId: TOOLS.CROP,
  // showCanvasOnly: true
};
</script>

ImageEditor.vue

<template>
  <div ref="container"></div>
</template>

<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from 'vue';
import {ImageEditorConfigDto} from '@/Dtos/ImageEditorConfigDto';
import FilerobotImageEditor from 'filerobot-image-editor';

// region setup
const props = defineProps<{
  config: ImageEditorConfigDto
  initOnRendering?: boolean
  debugMode?: boolean
}>();
// endregion

// region refs
const container = ref<HTMLDivElement>();
const fileRobotImageEditor = ref<FilerobotImageEditor>();
// endregion

// region computed
// endregion

// region functions
function init() {
  if (!container.value) throw new Error('Error while rendering. No container found.');
  if (props.initOnRendering) start();
}

function start() {
  if (container.value) {
    fileRobotImageEditor.value = new FilerobotImageEditor(
        container.value,
        props.config
    );
    if (props.debugMode && !fileRobotImageEditor.value) console.error('Can`t initiate the image editor.');
    fileRobotImageEditor.value?.render();
  }
}

function stop() {
  fileRobotImageEditor.value?.terminate();
}

async function getCurrentImgData(
    imageFileInfo: {
      name?: string,
      extension?: string,
      quality?: number,
      size?: { width?: number; height?: number }
    },
    pixelRatio?: boolean | number, keepLoadingSpinnerShown?: boolean
) {
  return fileRobotImageEditor.value?.getCurrentImgData(imageFileInfo, pixelRatio, keepLoadingSpinnerShown);
}

// endregion

// region livecycle hooks
onMounted(() => init());
onBeforeUnmount(() => stop());
// endregion

defineExpose({
  start,
  stop,
  getCurrentImgData
});

</script>

Do you have any solutuin for it?

Regards.

[AhmeeedMostafa]

Hello @mtmsFKoechl ,

• For (1), I wasn't able to produce it using ur provided CROP config, so please provide a codesandbox containing the issues
• For (2), this is a the current behavior u couldn't zoom while opening the crop avoiding for improper behaviors/issues.
• For (3), it shows the current reized/cropped dimensions mapped/relative to the original image.
• For (4), we have added removeSaveButton property in v4.7.1 u could start using it.

waiting ur feedback.

[mtmsFKoechl]

Hi @AhmeeedMostafa,

thank you for your response.

1. Here is the codesandbox example : Filerobot Image Editor (demo for issue 430).
2. Will this be added in the future?
3. Sorry but could you please explain it, because I don't understand it. My problem at this point is that my img has a width of 1536px and height 864px, the cropper settings were fixed with a width of 225px and height 300px. So it's very weird for me that the cropper says the width is 948px and the height 1265px.
4. Thank you very much, I will update the package soon as it is available at npm.

Regards.

[AhmeeedMostafa]

@mtmsFKoechl sorry again for the late reply.
1- I checked it but seems like you are facing some issue in the building options I couldn't check it (but I copied your crop config locally and checked it but still couldn't reproduce the issue).
2- It is doable to be improved but not in the near future.
3- The crop is not about 'resizing' the image, it is about selecting/cutting specific part of the image so its dimensions is still relative to the original image size if u haven't selected any resize option... defininig crop dimensions will define the part that should be cut and used from the image but the final dimensions will the original image dimensions if u need to have the saved image in the same crop dimensions/size, then u should provide the same dimensions to resize tool, in that case the editor will crop and lock it to ur selected part and resize tool will resize the cropped image to the needed dimensions.
4- hope it works!

[XeKT0r]

I have the same problem. I need to limit the cropping area to a minimum of 1400 and a maximum of 4000. When I substitute such parameters, it increases several times. I also noticed that when the canvas width changes (when the screen size changes), the maximum and minimum crop values ​​change dynamically. Maybe someone has encountered this and knows how to make the cropping limitation work correctly. Maybe I'm doing something wrong with the crop parameters?.
Stack (next.js 14.0.4, react-filerobot-image-editor: 4.8.1)

Code:

import { useState } from 'react';
import FilerobotImageEditor from 'react-filerobot-image-editor';

function ImageEditor() {
    const [isImgEditorShown, setIsImgEditorShown] = useState(false);

    const openImgEditor = () => {
        setIsImgEditorShown(true);
    };

    const closeImgEditor  = () => {
        setIsImgEditorShown(false);
    };

    return (
        <div>
            <button onClick={openImgEditor}>Open Filerobot image editor {isImgEditorShown}</button>
            {isImgEditorShown && (
                <div>
                    <h1>Image editor</h1>
                    <FilerobotImageEditor
                        source="https://iptravelphotography.com.au/wp-content/uploads/2019/10/Karijini-Australia-an-award-winning-photograph-by-Ignacio-Palacios.jpg"
                        onSave={(editedImageObject, designState) => console.log('saved', editedImageObject, designState)}
                        onClose={closeImgEditor}
                        Rotate={{ angle: 90, componentType: 'slider' }}
                        tabsIds={['Adjust', 'Annotate', "Resize"]} 
                        defaultTabId={'Annotate'}
                        defaultToolId={'Text'} 
                        previewPixelRatio={0}
                        savingPixelRatio={0}
                        Crop={{
                            minHeight:1400,
                            minWidth:1400,
                            maxWidth: 4000,
                            maxHeight: 4000,
                            ratio: 1,
                            noPresets: false,
                            autoResize: true,
                        }}
                        noCrossOrigin
                        useBackendTranslations
                    />
                </div>
            )}
        </div>
    );
}

export default ImageEditor

next.config.js:

module.exports = () => {
    /**
     * @type {import('next').NextConfig}
     */
    const nextConfig = {
        swcMinify: true,
        transpilePackages: ['react-filerobot-image-editor', 'tippy.js'],
        eslint: {
            ignoreDuringBuilds: true,
        },
        webpack: (config) => {
           config.externals = [...config.externals, "canvas", "jsdom"];
            return config;
        }
    };

    return nextConfig;
};