Image size compression takes too long and freezes the UI

[dshukertjr]

I am trying to compress the size of the image before uploading it to firebase storage, but the image compression takes way too long and freezes the UI.

The code I am using is the following code, which was taken from
this stack overflow question:

import 'package:path_provider/path_provider.dart';
import 'dart:math' as Math;

void compressImage() async {
  File imageFile = await ImagePicker.pickImage();
  final tempDir = await getTemporaryDirectory();
  final path = tempDir.path;
  int rand = new Math.Random().nextInt(10000);

  Im.Image image = Im.decodeImage(imageFile.readAsBytesSync());
  Im.Image smallerImage = Im.copyResize(image, 500); // choose the size here, it will maintain aspect ratio

  var compressedImage = new File('$path/img_$rand.jpg')..writeAsBytesSync(Im.encodeJpg(image, quality: 85));
}````

[dshukertjr]

It seems like this line is the one that is taking really long and freezing the UI.

Im.Image image = Im.decodeImage(imageFile.readAsBytesSync());

[adriancmurray]

Someone built an image compression component that uses native compression tools rather than what was provided with that image library. https://github.com/btastic/flutter_native_image

I recommend using that instead. The only real issue I've run into is an incompatibility with the Master Channel.

[zoechi]

Alternatively you can use https://docs.flutter.io/flutter/foundation/compute.html to move computation off the UI thread to a new thread.
Some things like using plugins (platform channel) is not yet supported in such threads as far as I know.

[goderbauer]

Where is Im.decodeImage defined? Are you using an external package to do the compression? In that case, the issue tracker for that package may be a better place to ask that question (or you use one of the suggestions from above to work around the slowness).

[zoechi]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away!
Thanks for your contribution.

[moadqassem]

@goderbauer this line here Im.decodeImage represents the import 'package:image/image.dart' as Im;. Take a look at the stack overflow link.

[zoechi]

Move the work to another isolate that you start up manually. This is not perfect yet.
compute() doesn't work for async results #25890 and the isolate needs to start up "manually".
Using isolates in this scenario currently also has the disadvantage that the image needs to be passed twice between the isolates.
There are discussions in dart-lang/language about allowing passing (immutable) data between isolates as reference to avoid copying
and #13937 is about allowing the use of plugins from isolates which would allow to upload from the additional isolate where the image was compressed directly.

[moadqassem]

@zoechi to be honest I have found another solution, not that great but works for my case at this point of time. What one can do, if the image_picker package is used I would simply use the maxHeight, maxWidth params. Again for the scenario that I have in had is ok. Thanks for the support mate.

[fvisticot]

image_picker work around is not the perfect solution. It would be fine to hav a elegant and performant solution to resize and compress image in pure dart language.
This performance issue needs to be re open

[zoechi]

@fvisticot follow #26194

[vy12021]

Start a platform thread as a plan b.

[aloisdeniel]

I can confirm that I successfuly resized an image from an isolate without locking the UI thread.

static Future<void> _resizeImage(String filePath) async {
    final file = File(filePath);

    final bytes = await file.readAsBytes();
    print("Picture original size: ${bytes.length}");

    final image = decodeImage(bytes);
    final resized = copyResize(image, 512);
    final resizedBytes = encodeJpg(resized, quality: 62);
    print("Picture resized size: ${resizedBytes.length}");

    await file.writeAsBytes(resizedBytes);
  }

// ...

await compute<String, void>(_resizeImage, filePath);
final resizedBytes = await File(filePath).readAsBytes();

The only drawback is that the image needs to be read again after execution.

[uKL]

Unfortunately isolates approach doesn't seem to work for Flutter Web. The UI still freezes. Is it a known issue?

[optimygmbh]

The only drawback is that the image needs to be read again after execution.

@aloisdeniel Thanks for you idea. It works for me as well. But you don't need to save the file again.

You can try this:

static Future<List<int>> _resizeImage(File file) async {
    final bytes = await file.readAsBytes();
    final img.Image image = img.decodeImage(bytes);
    final img.Image resized = img.copyResize(image, width: 800);
    final List<int> resizedBytes = img.encodeJpg(resized, quality: 90);

    return resizedBytes;
  }

// ...

List<int> resizedBytes = await compute<File, List<int>>(_resizeImage, file);

[mdanics]

Looks like the image picker plugin now supports it 😃 #34523

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.