feat: improve image conversion

Author: iOSonntag

README.md

@@ -1,2 +1,16 @@
 # flutter-package-devspace
 A repo that contains unfinished packages that can be integrated via submodule.
+
+
+
+### Notes
+
+
+#### Image Conversion
+In order to use image conversion in the web make sure to add 
+
+```html
+<script src="https://unpkg.com/pica/dist/pica.min.js" ></script>
+```
+
+For more info see https://pub.dev/packages/flutter_image_compress#web

lib/blue_forms/models/elements/form_input_images.dart

@@ -31,7 +31,7 @@ class FormInputImages extends FormInput {
   final int min;
   final int max;
   final FormInputImagesFileSettings fileSettings;
-  final void Function(List<img.Image> images)? onChange;
+  final void Function(List<Uint8List> images)? onChange;
 
   const FormInputImages({
     required super.id,

lib/blue_forms/widgets/form_input_images.dart

@@ -11,7 +11,7 @@ class _FormInputImagesWidget extends StatelessWidget {
   final bool visuallyMarkRequired;
   final dynamic currentSavedValue;
   final String? externalError;
-  final void Function(List<img.Image> images) onSave;
+  final void Function(List<Uint8List> images) onSave;
 
   const _FormInputImagesWidget({
     super.key,
@@ -67,7 +67,7 @@ class _FormInputImagesWidgetMulti extends StatefulWidget {
   final bool visuallyMarkRequired;
   final dynamic currentSavedValue;
   final String? externalError;
-  final void Function(List<img.Image> images) onSave;
+  final void Function(List<Uint8List> images) onSave;
 
   const _FormInputImagesWidgetMulti({
     super.key,
@@ -407,7 +407,7 @@ class _FormInputImagesWidgetSingle extends StatefulWidget {
   final bool visuallyMarkRequired;
   final dynamic currentSavedValue;
   final String? externalError;
-  final void Function(img.Image? image) onSave;
+  final void Function(Uint8List? image) onSave;
 
   const _FormInputImagesWidgetSingle({
     // ignore: unused_element
@@ -450,7 +450,7 @@ class _FormInputImagesWidgetSingleState extends State<_FormInputImagesWidgetSing
 
     return _FormInputContainerWidget(
       description: widget.definition.description,
-      child: FormField<img.Image?>(
+      child: FormField<Uint8List?>(
         initialValue: widget.currentSavedValue ?? widget.definition.initialValue,
         onSaved: widget.onSave,
         validator: (image)
@@ -530,7 +530,7 @@ class _FormInputImagesWidgetSingleState extends State<_FormInputImagesWidgetSing
   }
 
 
-  Widget _buildPreview(BuildContext context, FormFieldState<img.Image?> state)
+  Widget _buildPreview(BuildContext context, FormFieldState<Uint8List?> state)
   {
     if (_imageProvider == null)
     {
@@ -612,7 +612,7 @@ class _FormInputImagesWidgetSingleState extends State<_FormInputImagesWidgetSing
     );
   }
 
-  Future<void> _addImage(ImageSource source, FormFieldState<img.Image?> state) async
+  Future<void> _addImage(ImageSource source, FormFieldState<Uint8List?> state) async
   {
 
 
@@ -627,11 +627,11 @@ class _FormInputImagesWidgetSingleState extends State<_FormInputImagesWidgetSing
         _internalError = null;
       });
 
-      img.Image? image;
+      Uint8List? image;
 
       if (imageFile != null)
       {
-        image = await imageFile.getImage();
+        image = await imageFile.readAsBytes();
       }
 
       if (image == null) return;
@@ -644,7 +644,7 @@ class _FormInputImagesWidgetSingleState extends State<_FormInputImagesWidgetSing
       {
         state.didChange(image);
         widget.definition.onChange?.call([image!]);
-        _imageProvider = image!.toImageProvider();
+        _imageProvider = MemoryImage(image!);
       });
     }
     finally
@@ -657,38 +657,62 @@ class _FormInputImagesWidgetSingleState extends State<_FormInputImagesWidgetSing
 
   }
 
-  Future<img.Image> _imageProcessing(img.Image image, FormFieldState<img.Image?> state) async
+  Future<Uint8List> _imageProcessing(Uint8List image, FormFieldState<Uint8List?> state) async
   {
-    if (widget.definition.fileSettings.minWidth != null && image.width < widget.definition.fileSettings.minWidth!)
+    final codec = await ui.instantiateImageCodec(image);
+    final frame = await codec.getNextFrame();
+
+
+    if (widget.definition.fileSettings.minWidth != null && frame.image.width < widget.definition.fileSettings.minWidth!)
     {
       _internalError = 'MIN_WIDTH';
       state.validate();
 
       throw Exception('Image width is smaller than min width');
     }
 
-    if (widget.definition.fileSettings.minHeight != null && image.height < widget.definition.fileSettings.minHeight!)
+    if (widget.definition.fileSettings.minHeight != null && frame.image.height < widget.definition.fileSettings.minHeight!)
     {
       _internalError = 'MIN_HEIGHT';
       state.validate();
 
       throw Exception('Image height is smaller than min height');
     }
 
+    int minHeight = frame.image.height;
+    int minWidth = frame.image.width;
 
-    // TODO: use the following for image processing (other is a way too slow): https://pub.dev/packages/flutter_image_compress
+    if (widget.definition.fileSettings.maxWidth != null)
+    {
+      if (widget.definition.fileSettings.maxHeight != null)
+      {
+        throw UnimplementedError('Max width and max height are not yet supported');
+      }
+      else
+      {
+        minWidth = widget.definition.fileSettings.maxWidth!;
+      }
+    }
+    else if (widget.definition.fileSettings.maxHeight != null)
+    {
+      minHeight = widget.definition.fileSettings.maxHeight!;
+    }
 
-    return image.convertImage(
-      type: widget.definition.fileSettings.conversion,
-      quality: widget.definition.fileSettings.conversionQuality,
-      maxWidth: widget.definition.fileSettings.maxWidth,
-      maxHeight: widget.definition.fileSettings.maxHeight,
+    return await FlutterImageCompress.compressWithList(image,
+      minHeight: minHeight,
+      minWidth: minWidth,
+      quality: (widget.definition.fileSettings.conversionQuality * 100).round(),
+      format: switch (widget.definition.fileSettings.conversion)
+      {
+        kImageConversionType.jpeg => CompressFormat.jpeg,
+        kImageConversionType.png => CompressFormat.png,
+      },
     );
-    
+
   }
 
 
-  void _deleteCurrentImage(FormFieldState<img.Image?> state)
+  void _deleteCurrentImage(FormFieldState<Uint8List?> state)
   {
     if (state.value == null)
     {

lib/devspace.dart

@@ -17,6 +17,7 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart' as material;
 import 'package:flutter/material.dart';
 import 'package:flutter_animate/flutter_animate.dart';
+import 'package:flutter_image_compress/flutter_image_compress.dart';
 import 'package:get_it/get_it.dart';
 import 'package:go_router/go_router.dart';
 import 'package:http/http.dart' as http;

lib/type_extensions/image.dart

@@ -4,7 +4,6 @@ part of devspace;
 // ignore: camel_case_types
 enum kImageConversionType
 {
-  none,
   jpeg,
   png
 }

pubspec.yaml

@@ -32,6 +32,7 @@ dependencies:
   loading_indicator: ^3.1.1
   omni_datetime_picker: ^2.0.2
   image: ^4.2.0
+  flutter_image_compress: ^2.3.0
 
 dev_dependencies:
   flutter_test: