React component goes blank after opening and closing a modal with the component inside.

[QuaCode]

It doesn't matter if you pass your source url as a prop or place the string directly. After doing conditional rendering a few times, the editor will open with a blank canvas.

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

<FilerobotImageEditor
savingPixelRatio={4}
previewPixelRatio={window.devicePixelRatio}
source={imageToEdit}
onSave={editedImageObject => {
if (!editedImageObject.imageBase64) return;
console.log(editedImageObject.imageBase64);
}}
onClose={onCancel}
Text={{
fontSize: 16,
}}
Crop={{
minWidth: 14,
minHeight: 14,
maxWidth: null,
maxHeight: null,
ratio: 'original',
ratioTitleKey: 'Cortar',
noPresets: false,
autoResize: false,
presetsItems: [],
presetsFolders: [],
}}
Pen={{
strokeWidth: 5,
}}
tabsIds={[TABS.ADJUST, TABS.ANNOTATE, TABS.FINETUNE]}
defaultTabId={TABS.ADJUST}
/>

[rogeriochaves]

same problem here

[TeoSymphonia]

same problem

[SaraZoarob]

hello @QuaCode and @TeoSymphonia, we are going to check and update you

[IdoiaReina]

Same problem here, sometimes reloading one or several times the page makes it work again

[AhmeeedMostafa]

The issue is fixed in version 4.3.8, please re-check it and let us know if all is good.

[zoranlj]

Hi everyone, I have version 4.3.8, and I'm still able to reproduce this error.
It happens randomly.
Not sure what causes it, but I'll give more information on my findings.
On Android, Chrome, Safari all is looking good. Issue is on iOS side.
Ionic and Capacitor uses WKWebView for iOS.
You can think of WKWebView as a stripped-down version of Safari.

Stack

"@capacitor/core": "4.6.1",
"@capacitor/android": "4.6.1",
"@capacitor/ios": "4.6.1",
"@ionic/core": "6.4.1",
"@ionic/react": "6.4.1",
"react": "18.0.0",
"filerobot-image-editor": "4.3.8"

Usage

Inside of an modal I'm conditional rendering FilerobotImageEditor component.

FileRobotBug.mov

[AhmeeedMostafa]

@zoranlj I checked the video you have attached, it doesn't seem like an issue ur provided image hasn't loaded and there is an error generated (the pop-up shown) which is logical.

[zoranlj]

@AhmeeedMostafa

What am I doing wrong?

const editedImage = useRef<getCurrentImgDataFunction>();
const imageData = editedImage?.current?.({}).imageData;
console.log(imageData?.imageBase64);

Sometime output from the console is ok.
Like this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABbsAAAPOCAYAAAAmwMXHAAAAAXNSR0IAr....

Sometimes output from the console is not OK.
Like this:
data:,

[AhmeeedMostafa]

@zoranlj sorry for late reply, it is not appropriate to have an empty output from the plugin, so please create a new issue with ur production steps and codesandbox for ur code to check the issue

[josec0609]

@AhmeeedMostafa
I can validate I'm seeing the exact same issue using react and only seeing issue on iOS devices.
Seems like getCurrentImgDataFnRef can sometimes returns bad output data:,. Not sure yet what's occurring, but have only had success recreating this issue on iOS devices (no luck on android or desktop browser) :(

@zoranlj Were you able to resolve this issue?

[zoranlj]

@josec0609 Try setting savingPixelRatio={1}. Also try to play around with that parameter to see what is best for you.

[josec0609]

@zoranlj Thanks for the suggestion. Started playing around with savingPixelRatio, but it doesn't seem like setting it to any value solves the issue.

[josec0609]

I created sandbox to recreate the issue shown by @zoranlj above and what I would assume is the same root cause for issue reported by @QuaCode. sandbox url

I think the issue is related to how canvas elements are garbage collected by Safari. Article on Safari canvas elements causing memory issues

Browser implementation for cleaning up canvas elements differs but on Safari and iOS this blank canvas issue is more prevalent. To recreate issue you need to visit sandbox on Safari or on iOS and open image editor & save image a few times ( (don't even have to edit image). You will eventually get the following warning on console
If using Safari inspector, you can also see all the canvas elements still in browser memory via the Graphics tab. I believe if the maximum canvas memory is exceeded this can lead to filerobot-image-editor loading the editor with a blank image on subsequent requests to open image editor.

Related reference issue seen by others creating projects using Konva: konvajs/konva#571
It seems canvas "memory leak" on Safari issue has been previously reported on Konva in issue above and the canvas elements now created by Konva should be "reset" to 0x0 after the canvas is unmounted so the canvas resources held by Safari should not be using much memory.

I don't seem to see the memory issues when just mounting/unmounting file-robot-image-editor, but only when saving the image (don't have to make any edits to the image at all issue will still be recreated). The image included in the sandbox is under the iOS pixel limitation for a canvas element 16.777.216 pixels (image dimensions 3024x4032). I also have savingPixelRatio and previewPixelRatio set to 1. For recreating the issue I'm not doing any actual editing of the image just opening the image editor and hitting save.

[HimonRana]

This is still happening and i get same error as @josec0609, after taking a picture with iOS-iphone 13 pro when editing the picture a few times(just edit and save 2-3 times), image goes blank. The imageBase64 is missing, same as @zoranlj.