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).
- flutter pub add browser_image_compression
- append inside the
<head>tag onindex.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
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';
}
}- Implement javascript "AbortSignal" to abort compression.