Browser Image Compression

This is a flutter plugin package that compress images using the javascript library browser_image_compression. This plugin only works on Web platform. Please see browser-image-compression repository for all image compression benefits.

Notable benifits of this plugin are:

Compression works on a web worker cuncurrently with your flutter app.
Image compression update progress.
Also can resize image if prefered.
You can limit the size of the compressed file in megabytes, (the lower you set the longer it takes to compress).

Installation

flutter pub add browser_image_compression
append inside the <head> tag on index.html

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js"></script>

import the plugin

    import 'package:browser_image_compression/browser_image_compression.dart';

code as the example below

Example

final XFile? xfile =
    await ImagePicker().pickImage(source: ImageSource.gallery);

if (xfile != null) {
    final initialSize = await xfile.length();

    // there's is compressImageByXFile that you can input the XFile directly but in this example it
    // uses the general method in case you're getting your image file through another way
    _imageNotifier.value = await BrowserImageCompression.compressImage(
    basename(xfile.path), // or xfile.name
    await xfile.readAsBytes(),
    lookupMimeType(xfile.name).toString(),
    Options(
        maxSizeMB: 1,
        maxWidthOrHeight: 2048,
        useWebWorker: true,
        onProgress: (progress) {
        _progressIndicatorNotifier.value = progress;
        },
    ),
    );

    _progressIndicatorNotifier.value = null;

    if (_imageNotifier.value != null) {
    final finalSize = (_imageNotifier.value!).length;

    var f = NumberFormat("####.0#", "en_US");

    comparisonSize =
        'initial size is $initialSize and final size is $finalSize. Compression of ${f.format(initialSize / finalSize)}x';
    }
}

TODO

Implement javascript "AbortSignal" to abort compression.

Browser Image Compression

Installation

Example

TODO

Libraries

browser_image_compression package