Can you guide me in the right direction in order to implement some editor features

[murat-ti]

Please use the discuss tab to ask a question.

Hi, I have 4 questions:

1. Is there posibility to export each ImageLayer to image (png/jpg in original size). I think the possible solution is to have a callback on removing layer action. For example, the user adds image from gallery and camera, he keeps it path and callback on remove layer helps to know when it has been deleted.

2. Is there posibility to save the text and emoji attributes (toJson format as example) on imageEditingComplete. For example:

   • TextLayer with Montserrat font, size: 18, color: red and backgroundColor: white, rotation: 0
   • EmojiLayer name: hands up, size: 20, rotation: 90

3. How user can dynamically change Image.asset/Image.file/Image.network path dynamically? For example: user opens editor with one one url and he wants to change it dynamically with saved state of all top layers on it. I tried so call editor.setState, but it doesn't help.

4. Is there posibility to export the final result without initial background. For example user opens the editor with some background image, but on export he saves all layers without that initial background

[hm21]

Hi,

I moved your questions to the Discuss tab because that tab is better for Q&A that users can quickly find the best answer to their questions ;) Anyway, below are the answers to your questions.

1. You can export/ import the full state history, which also includes all layers. The full example can you checkout here.

2. Same like in question “1” can you export and choose the format like below.

 var history = await editorKey.currentState!.exportStateHistory(
  configs: const ExportEditorConfigs(
    historySpan: ExportHistorySpan.all,
    exportPainting: true,
    exportText: true,
    exportCropRotate: true,
    exportFilter: true,
    exportEmoji: true,
    exportSticker: true,
  ),
);

await history.toJson();
/// Other options
/// await history.toFile(path: 'file-path');
/// await history.toMap();

3. I'm not sure if I understand you correctly, but you want to open a new editor that contains all the layers you had before, like a template, right? If so, you can export/import the state history as described above.

4. Yes, when you export the state history, it will not export the background image.

[murat-ti]

Thank you for quick response.

I think you didn't completely get my point:

1. On editor we can add image from gallery and instead of getting image as bytes in result, I just want to get image path. In this case I'll have original image with real dimensions. I've checked state history and as I understand it retursn "imgSize":{"width":480.0,"height":480.0}, which is scaled size, because my original image size was 601x599. Later I found onRemoveLayer, which resolves this problem

2. You answered, no question anymore.

3. I have

ProImageEditor.asset(imagePath, ...

and how can I dynamically change imagePath, because I tried

editorKey.currentState!.setState(() { if (imagePath == Assets.png.image1.path) { imagePath = Assets.png.image2.path; } else { imagePath = Assets.png.image1.path; } }); setState(() {});

but it doesn't help

5. I mean export final image without background image, not history. Is there such option?

[hm21]

Question 1

Okay, a bit confusing, but I will answer step by step. I think this will help you the most.

On editor we can add image from gallery and instead of getting image as bytes in result, I just want to get image path.

Yes, you can add the image from file, network, asset and memory. The result will always be as Uint8List even if you use as example network because the editor can't write directly to these options. However, if you want to save your image as File, you can do it as below:

onImageEditingComplete: (bytes) async {
  await File('path-to-your-file').writeAsBytes(bytes);
}

I've checked state history and as I understand it retursn "imgSize":{"width":480.0,"height":480.0}, which is scaled size, because my original image size was 601x599.

That “imgSize” just says the last rendered image size, but not the real size. As an example, when transforming the image by cropping, it can change this value. Even though this value is smaller when the editor generates the image, it still respects the pixel ratio of your device that it didn't scale down the image. The editor will change the image size only if you set a custom pixel ratio, or you cropped the image.

Later I found onRemoveLayer, which resolves this problem

I'm not sure what it solved now, but good it's solved. ;)

Question 3

This is currently not possible because the editor needs to decode the image for it to work properly. However, later today I will release for you a new version where you can trigger the decode function by yourself. Below is an example of how you can do it then. It will work then in versions greater 4.0.2.

editorKey.currentState!.editorImage = EditorImage(
  /// choose only one of this options
  byteArray: ...,
  assetPath: ...,
  file: ...,
  networkUrl: ...,
);
editorKey.currentState!.decodeImage();

Question 4

If you create an image only with the layers, you will need to replace the background image with a transparent image. You can do it like in "Question 3" where you add an image as a transparent Uint8List. In case you don't know how to create a transparent image, you can follow my example here.

I hope this answers all your questions :)

[murat-ti]

1. I add image from gallery and save this path in local variable. Then if user removes StickerDataLayer (image layer), so I can catch this action in onRemoveLayer(layer) callback and remove it also from my local variable, which stores image paths. So, my question resolved.

2. It sounds good, I'll check it

3. It is good idea. In future we can mask it with show/hide background button in editor

Thank you

[murat-ti]

Hi, I use version 4.0.4

                onPressed: () async {
                  if (imagePath == image1.path) {
                    imagePath = image2.path;
                  } else {
                    imagePath = image1.path;
                  }
                  editorKey.currentState!.editorImage = EditorImage(
                    assetPath: imagePath,
                  );
                  await editorKey.currentState!.decodeImage();
                  //editorKey.currentState!.setState((){});
                  print(imagePath);
                },

In the console I see that image path is correct, but the background image doesn't change still.
Do I get your instruction correctly?

[hm21]

Ah, I see, the problem is that the editor doesn't want to rebuild the filtered image to save performance as long as the hashcode hasn't changed. However, we can still force the editor to do that if we replace the current state history. Below is an example:

 configs: ProImageEditorConfigs(
    designMode: platformDesignMode,
    customWidgets: ImageEditorCustomWidgets(
      mainEditor: CustomWidgetsMainEditor(
        bodyItems: (editor, rebuildStream) {
          return [
            ReactiveCustomWidget(
              stream: rebuildStream,
              builder: (_) => editor.isSubEditorOpen
                  ? const SizedBox.shrink()
                  : Positioned(
                      bottom: 20,
                      left: 0,
                      child: Container(
                        decoration: BoxDecoration(
                          color: Colors.lightBlue.shade200,
                          borderRadius: const BorderRadius.only(
                            topRight: Radius.circular(100),
                            bottomRight: Radius.circular(100),
                          ),
                        ),
                        child: IconButton(
                          onPressed: () async {
                            var url = 'https://picsum.photos/2000';
                            var bytes = await fetchImageAsUint8List(url);

                            if (!mounted) return;
                            await precacheImage(
                                MemoryImage(bytes), context);

                            editor.editorImage =
                                EditorImage(byteArray: bytes);

                            await editor.decodeImage();

                            /// Force to rebuild everything
                            int pos = editor.stateManager.position;
                            EditorStateHistory oldHistory =
                                editor.stateManager.stateHistory[pos];

                            editor.stateManager.stateHistory[pos] =
                                EditorStateHistory(
                              layers: oldHistory.layers,
                              transformConfigs: oldHistory.transformConfigs,
                              blur: oldHistory.blur,
                              filters: [...oldHistory.filters],
                            );

                            /// Ensure that in the case the editor generated
                            /// in the background a screenshot it will generate
                            /// it again with the new picture.
                            if (pos > 0) {
                              editor.stateManager.screenshots[pos - 1]
                                  .broken = true;
                            }
                          },
                          icon: const Icon(
                            Icons.bug_report,
                            color: Colors.red,
                          ),
                        ),
                      ),
                    ),
            ),
          ];
        },
      ),
    ),
  ),

[murat-ti]

It works.
Thank you for your efforts.