Image quality is terrible

[loriscrisafo]

Terrible image quality on both preview and save.

1. Image after upload and compressed from 30 mb to 700 kb on a simple img tag
   
   2.Raw image on the editor without any compression, just uploaded it from an input and transformed to base64 to use it as source, 1st image is on the preview second is after gathering the base64 data from the fnRef after doing a minimal change, just adjusted the image a little, and using it on an image tag.
   
   (zoomed in so you can see how bad the quality is)
   
   This is after a tiny crop.

Image also gets downgraded with smaller images such as a 50kb image, i've tried both with react and vanilla js packages they both do this.

<FilerobotImageEditor className='z-50 w-full h-full '
source={uploadedFile}
onClose={closeImgEditor}
annotationsCommon={{
fill: '#ff0000'
}}
getCurrentImgDataFnRef={fnRef}
removeSaveButton={true}
Text={{ text: 'Filerobot...' }}
Rotate={{ angle: 90, componentType: 'slider' }}
tabsIds={[TABS.ADJUST, TABS.ANNOTATE, TABS.WATERMARK, TABS.FINETUNE, TABS.RESIZE]} // or {['Adjust', 'Annotate', 'Watermark']}
defaultTabId={TABS.ANNOTATE} // or 'Annotate'
defaultToolId={TOOLS.TEXT} // or 'Text'
savingPixelRatio={20}
previewPixelRatio={20}
defaultSavedImageQuality={1}/>

[loriscrisafo]

I dont know how you did it on the demo but it doesn't downgrade there

[XeKT0r]

I have the same problem ..

[SourabhSysquare]

Any updates on this? I am also facing the same issue.

[AhmeeedMostafa]

Hello @loriscrisafo @XeKT0r @SourabhSysquare ,

Have you tried to provide your image with a BLOB URL instead of base64? or providing the HTML image itself after being loaded?
let me know with your answer, and I'd appreciate you could add a codesandbox generates your issue exactly for quickly checking it since it is not happening on my side.

[ramazankarisan]

Hello everyone and @AhmeeedMostafa ,
I also have same problem for image quality loss. In our app, we are saving the edited image with editedImageObject.imageBase64, but realized that after saving image, there is a image quality loss.

In this codesandbox, you can try also that. If you click save button a couple of times consecutively(even without editing), you will notice it. Just in case I wil drop here an example:

Original image:

Image after 5 times clicked save button:

[SourabhSysquare]

Hello @loriscrisafo @XeKT0r @SourabhSysquare ,

Have you tried to provide your image with a BLOB URL instead of base64? or providing the HTML image itself after being loaded? let me know with your answer, and I'd appreciate you could add a codesandbox generates your issue exactly for quickly checking it since it is not happening on my side.

URL.createObjectURL(file)
I am using a Blob URL for an image source, but it's compressing the image. Can you show me your code for picking an image and cropping it?

[loriscrisafo]

@AhmeeedMostafa https://codesandbox.io/p/sandbox/filerobot-error-r4rsg9?file=%2Fsrc%2FApp.js
In the code sandbox the quality looks good, I also tried with the vanilla package, but quality also looks bad, tried with blob, htmlimageobject and base64 none of them render the image with such good quality as in the sandbox so think there might be a difference between the CDN package and the vanilla/react package maybe? I have no idea, or maybe it's just a CSS thing in which depending on the size of the container the editor is rendering in is causing the issue. But I noticed that in the codesandbox the editor is way slower because of the image quality, could it be that the pixel ratio properties are not working properly? Because in my app the image editor isn't as laggy as in the sandbox. Going to try setting default ratios to 20 inside the package itself and will tell you how it went.

[loriscrisafo]

Changing the package default values changed nothing

[SourabhSysquare]

@AhmeeedMostafa Do you have any updates on this issue? Or do you have any suggestions on where I might find a solution in the library?

[MxRmz]

I have the same issue. Image quality is very low, doesn't depend on upload method.

update:
Found out it's the issue of NPM package. NPM version doesn't respond to property previewPixelRatio. You may pass any value, but canvas size won't be changed.
Tried with filerobot-image-editor 4.8.1

Meanwhile CDN version doesn't have this problem.
@AhmeeedMostafa could you check it please?

[mcarpenterjr]

Any movement on this?

[loriscrisafo]

Since CDN version works flawlessly i will leave you a tutorial on how to make it work on react.

1. First copy and paste the cdn script code on your index.html (If you are on Astro.js then paste it on the layout the react component is rendering in)

<script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js"></script>

2. Code snippet of how to render the image editor

const [uploadedFile, setUploadedFile] = useState(null);
const [editorInstance, setEditorInstance] = useState(null);

const { TABS, TOOLS } = FilerobotImageEditor;

     let config = {
       useBackendTranslations: false,

       tabsIds: [TABS.ADJUST, TABS.ANNOTATE, TABS.WATERMARK, TABS.FILTER],
       defaultTabId: TABS.ANNOTATE,
       defaultToolId: TOOLS.TEXT,
       source: uploadedFile,
       onClose: closeImgEditor,
       annotationsCommon: {
         fill: "#ff0000",
       },
       removeSaveButton: true,
       savingPixelRatio: 20,
       previewPixelRatio: 5, // you can set this higher but it will be much slower i feel like 5 is already enough for a good image quality
       defaultSavedImageQuality: 1,
       Text: { text: "Filerobot..." },
       Rotate: { angle: 90, componentType: "slider" },
     };
     const filerobotImageEditor = new FilerobotImageEditor(
       document.querySelector("#editor_container"),
       config
     );
     filerobotImageEditor.render({
       onClose: (closingReason) => {
         console.log("Closing reason", closingReason);
         filerobotImageEditor.terminate();
       },
     });
       setEditorInstance(filerobotImageEditor);

3. Code snippet on how to get the base64 from the editor

const saveImage = async () => {
    let image = editorInstance.getCurrentImgData().imageData.imageBase64;
    console.log(image);
    //More code here

  };

[mcarpenterjr]

That would be cool, but I'm using the NPM package.

[loriscrisafo]

Yeah i was using npm package too, just use the cdn package then as a temporary fix

[haitranviet96]

Since CDN version works flawlessly i will leave you a tutorial on how to make it work on react.

1. First copy and paste the cdn script code on your index.html (If you are on Astro.js then paste it on the layout the react component is rendering in)

<script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js"></script>

2. Code snippet of how to render the image editor

const [uploadedFile, setUploadedFile] = useState(null);
const [editorInstance, setEditorInstance] = useState(null);

const { TABS, TOOLS } = FilerobotImageEditor;

     let config = {
       useBackendTranslations: false,

       tabsIds: [TABS.ADJUST, TABS.ANNOTATE, TABS.WATERMARK, TABS.FILTER],
       defaultTabId: TABS.ANNOTATE,
       defaultToolId: TOOLS.TEXT,
       source: uploadedFile,
       onClose: closeImgEditor,
       annotationsCommon: {
         fill: "#ff0000",
       },
       removeSaveButton: true,
       savingPixelRatio: 20,
       previewPixelRatio: 5, // you can set this higher but it will be much slower i feel like 5 is already enough for a good image quality
       defaultSavedImageQuality: 1,
       Text: { text: "Filerobot..." },
       Rotate: { angle: 90, componentType: "slider" },
     };
     const filerobotImageEditor = new FilerobotImageEditor(
       document.querySelector("#editor_container"),
       config
     );
     filerobotImageEditor.render({
       onClose: (closingReason) => {
         console.log("Closing reason", closingReason);
         filerobotImageEditor.terminate();
       },
     });
       setEditorInstance(filerobotImageEditor);

3. Code snippet on how to get the base64 from the editor

const saveImage = async () => {
    let image = editorInstance.getCurrentImgData().imageData.imageBase64;
    console.log(image);
    //More code here

  };

i have tried your solution but the issue still persists. I even use your config but it's still losing quality onSave.

   savingPixelRatio: 20,
   previewPixelRatio: 5, // you can set this higher but it will be much slower i feel like 5 is already enough for a good image quality
   defaultSavedImageQuality: 1,

[loriscrisafo]

@haitranviet96 No idea since I use my custom function to gather the base64 image, I haven't tested with onSave, maybe the onSave function comes with a built-in compressor or something? Test it with the function I wrote

[ramazankarisan]

Hello, is there anyone using react with typescript and have this issue?
I have also still same error, I tried to apply CDN in react but could not manage it, but the issue still persists.

Hello everyone and @AhmeeedMostafa , I also have same problem for image quality loss. In our app, we are saving the edited image with editedImageObject.imageBase64, but realized that after saving image, there is a image quality loss.

In this codesandbox, you can try also that. If you click save button a couple of times consecutively(even without editing), you will notice it. Just in case I wil drop here an example:

Original image:

Image after 5 times clicked save button:

[ramazankarisan]

Here is a codeSandbox, what I tried to run with CDN link in a React project with ts, but as you can see, that editor is not correctly rendered.

any type of help for npm version with saving issue or for CDN version that stays above is appreciated.

@AhmeeedMostafa @loriscrisafo

[loriscrisafo]

No idea, try replicating with js instead of ts and see if it works. I only noticed the console logs saying it has to be a url or htmlimageelement, maybe try with those.

Here is a codeSandbox, what I tried to run with CDN link in a React project with ts, but as you can see, that editor is not correctly rendered.

any type of help for npm version with saving issue or for CDN version that stays above is appreciated.

@AhmeeedMostafa @loriscrisafo

[ramazankarisan]

Thanks, @loriscrisafo, I made it work with CDN in react-ts, the issue was to wait a bit more, till script is loaded and there is no quality loss, of course, but I realized saving functionality got slower.

When there is a solution with npm, would be so much good.

[ramazankarisan]

hey, is there any plan to focus on this topic, I think it is really important and crucial. Do you have any idea @AhmeeedMostafa or someone else?

[erik-baam]

I also see this. Please look into this!

[AhmeeedMostafa]

Hello @erik-baam @loriscrisafo @ramazankarisan @haitranviet96 @mcarpenterjr ,
Excuse me for the late reply although the time is tight, but I checked the issue once a long time ago and couldn't reproduce it, I waited to have free time to recheck it again and did that but I wasn't able to produce it and checked your provided codesandboxs (1 is working fine no quality loss, others have some issue with the codesandbox instance)

The time is tight to try to search for the issue although I tried to reproduce so I'ld appreciate embedding some codesandbox or code example (and u managed to reproduce the issue there)
or if you could spend sometime to check the library by urself, fixing the issue - if found - & open a PR that would be useful for all of us :)

[piyushhsainii]

Thanks, @loriscrisafo, I made it work with CDN in react-ts, the issue was to wait a bit more, till script is loaded and there is no quality loss, of course, but I realized saving functionality got slower.

When there is a solution with npm, would be so much good.

hey how much time did you wait for it to render?

[piyushhsainii]

I have the same issue. Image quality is very low, doesn't depend on upload method.

update: Found out it's the issue of NPM package. NPM version doesn't respond to property previewPixelRatio. You may pass any value, but canvas size won't be changed. Tried with filerobot-image-editor 4.8.1

Meanwhile CDN version doesn't have this problem. @AhmeeedMostafa could you check it please?

Hey can you share your CDN version, how have you implemented it? because in my cdn version the image quality is still terrible

[ramazankarisan]

Thanks, @loriscrisafo, I made it work with CDN in react-ts, the issue was to wait a bit more, till script is loaded and there is no quality loss, of course, but I realized saving functionality got slower.
When there is a solution with npm, would be so much good.

hey how much time did you wait for it to render?

hey, @piyushhsainii , that was something like that what we did exactly, but as I said that was very slow.

useEffect(() => {
    // Ensure the FilerobotImageEditor script is loaded
    if (window.FilerobotImageEditor) {
      const { TABS, TOOLS } = window.FilerobotImageEditor;
      const config = {
       // some config detail here
      };
      
      // Create an editor instance and attach it to the container
      const filerobotImageEditor = new window.FilerobotImageEditor(
        document.querySelector('#editor_container'),
        config
      );
      
      filerobotImageEditor.render({
        onClose: () => {
          filerobotImageEditor.terminate();
        },
      });
    }
    // with dependencies it will cause an rerenders that crashes the app
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

[nialloc9]

So should we downgrade the package version to a previous version or is CDN our only option?

[mhamzaraja]

I am facing the same image quality issue with the NPM package is there any solution till now?

[piyushhsainii]

I am facing the same image quality issue with the NPM package is there any solution till now?

CDN is the only option

[XeKT0r]

I am facing the same image quality issue with the NPM package is there any solution till now?

CDN is the only option

Unfortunately, it didn't help in my case. (Next.js 14)

[kevinsguides]

I am also having this issue with image quality, React19, laravel-vite 1.1.1, vite 5.4.11 [email protected]

:(