[Bug]: When using paint, the image suddenly disappears

[bybabek]

Package Version

4.2.7

Flutter Version

3.22

Platforms

Web

How to reproduce?

This problem occurs when you open the website with a mobile device

Logs (optional)

No response

Example code (optional)

No response

Device Model (optional)

xiaomi 12 lite (android 14)

[bybabek]

https://github.com/user-attachments/assets/192dbfb2-121f-4dd5-8a71-926486536580

[hm21]

Thank you for reporting this issue. Can you also answer the following questions to help me resolve this issue?

1. What image format are you using? For example “JPEG or PNG”.
2. What image size do you have? For example “10 MB”
3. Can you publish the editor widget? Like ProImageEditor.asset(/*your configs*/).
4. Does the problem also occur on other devices?
5. The problem is only in debug mode or also in release mode?
6. Which flutter web renderer are you using? For example “canvas” or “html”. For the case you use “html” can you also try with the “canvas” renderer, which I explain here

[bybabek]

I found the following problem in Flutter. Very strangely, http request to desktop domain.com/image.jpg works (GET). However, it does not work in the mobile browser. By chance, I saw that it worked while adding a query. example: domain.com/image.jpg?a=b

1. jpg
2. 2.75 MB

3. ProImageEditor.network( "$adminServerUrl/uploads/${ExampleConstants.of(context)!.file.filepath}", key: editorKey, callbacks: ProImageEditorCallbacks( onImageEditingStarted: onImageEditingStarted, onImageEditingComplete: onImageEditingComplete, onCloseEditor: onCloseEditor, ), configs: ProImageEditorConfigs( paintEditorConfigs: const PaintEditorConfigs( editorMinScale: 1, editorMaxScale: 5, editorIsZoomable: true, freeStyleHighPerformanceScaling: false, minScale: 1, maxScale: 5, ), designMode: platformDesignMode, mainEditorConfigs: const MainEditorConfigs( editorIsZoomable: true, ), imageEditorTheme: const ImageEditorTheme( paintingEditor: PaintingEditorTheme( appBarBackgroundColor: appMainColor, bottomBarColor: appMainColor), appBarBackgroundColor: appMainColor, bottomBarBackgroundColor: appMainColor, )), )

   4. only in android and ios browser
   5. both of them
   6. default flutter build web and flutter run

I think canvaskit

[bybabek]

I updated my code like this. Now the picture appears on the screen for a very short time and disappears (200-500 ms). This time it is experienced without clicking on the paint.

ProImageEditor.memory(
        getUint!,
        key: editorKey,
        callbacks: ProImageEditorCallbacks(
          onImageEditingStarted: onImageEditingStarted,
          onImageEditingComplete: onImageEditingComplete,
          onCloseEditor: onCloseEditor,
        ),
        configs: ProImageEditorConfigs(
            paintEditorConfigs: const PaintEditorConfigs(
              editorMinScale: 1,
              editorMaxScale: 5,
              editorIsZoomable: true,
              freeStyleHighPerformanceScaling: false,
              minScale: 1,
              maxScale: 5,
            ),
            designMode: platformDesignMode,
            mainEditorConfigs: const MainEditorConfigs(
              editorIsZoomable: true,
            ),
            imageEditorTheme: const ImageEditorTheme(
              paintingEditor: PaintingEditorTheme(
                  appBarBackgroundColor: appMainColor,
                  bottomBarColor: appMainColor),
              appBarBackgroundColor: appMainColor,
              bottomBarBackgroundColor: appMainColor,
            )),
      )

[hm21]

Okay, thank you for the information. Can you also try the web demo and select the option “Zoom in Paint and Main Editor” if it works with your mobile devices there? In the case it also didn't work, which web browser do you use on your mobile android device (as example chrome or Samsung-Internet)?

[bybabek]

Okay, thank you for the information. Can you also try the web demo and select the option “Zoom in Paint and Main Editor” if it works with your mobile devices there? In the case it also didn't work, which web browser do you use on your mobile android device (as example chrome or Samsung-Internet)?

I've tried. The entire demo runs on the mobile browser. Then the problem is caused by my code. but it was working before. This is a situation that happened in the last month. That's why I wrote to you

[bybabek]

I finally found the problem. I temporarily removed "clipper" from my use. It's not in the demo yet, and I couldn't find the reason for it.

Now crop is not responding

  Widget _buildCropPainter({required Widget child}) {
    CutOutsideArea clipper = CutOutsideArea(configs: widget.transformConfigs);
    return child;
    if (widget.configs.cropRotateEditorConfigs.roundCropper) {
      return ClipOval(clipper: clipper, child: child);
    } else {
      return ClipRect(clipper: clipper, child: child);
    }
  }

[hm21]

Okay, that's interesting. Can you try to add the image editor directly after initializing your app without any configurations and check if it works correctly, then like below? And important is when you try it, please also use the URL like in the code below from "picsum...", because the image editor download the image in the background that it can decode it with all the information and maybe, there is also a problem.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Pro-Image-Editor',
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue.shade800),
      useMaterial3: true,
    ),
    debugShowCheckedModeBanner: false,
    home: ProImageEditor.network(
      'https://picsum.photos/id/230/2000',
      callbacks: const ProImageEditorCallbacks(),
    ),
  );
}

[bybabek]

https://github.com/user-attachments/assets/fbd803fa-cd7f-47cc-b1ac-9ee4f2518458

Mode: Debug

import 'package:flutter/material.dart';
import 'package:pro_image_editor/pro_image_editor.dart';

void main(List<String> args) {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pro-Image-Editor',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue.shade800),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: ProImageEditor.network(
        'https://picsum.photos/id/230/2000',
        callbacks: const ProImageEditorCallbacks(),
      ),
    );
  }
}

[bybabek]

https://github.com/user-attachments/assets/ec3f9628-7dd8-4d54-912d-8b4ddc211d52

I noticed something else. If I tap the reset option within the crop/rotate the problem is resolved.

[hm21]

Okay, it seems like for some reason is there an issue with the TransformConfigs cuz when you press reset in the crop/rotate editor it will reset these configs. How about the filter editor, is there also any problem before you reset the editor?

[bybabek]

https://github.com/user-attachments/assets/63cb4aed-a12d-4c2d-8006-8573b3796eef

[hm21]

Okay, if the filters look like that, is it a problem that you didn't use the flutter canvas renderer. Can you follow the steps I describe here to set up the image editor correctly. The important is inside your flutter_bootstrap.js file to add the canvas renderer like here.

[bybabek]

Thank you for your help. You were right, and this solution resolved my issue. I apologize for not reading carefully and taking up your time. I appreciate you and your project. <3