Open hanyuzheng opened 1 week ago
First of all you need to be sure that you are using the latest version image: ^4.2.0
and put it inside your pubspec.yaml
Second of all, i don't understand what are you trying to do by Decode a GIF then Re-encode it as GIF!
Try these solutions, as I’m currently working on an open source application that handles this kind of stuff in my @openlab-x, and I will launch it soon. Of course, @brendan-duncan will get a lot of credit for his hard work on https://pub.dev/packages/image :) Everything is working on my end!
import 'package:image/image.dart' as img;
import 'dart:io';
void main() async {
// Load the GIF image file
var gifImage = await File('your_gif_image.gif').readAsBytes();
// Decode the GIF image file
var decodedImage = img.decodeGif(gifImage);
if (decodedImage != null) {
// Perform operations on the decoded image if needed
Uint8List imageData = img.encodeGif(decodedImage);
// Save the result back as a GIF
await File('output_image.gif').writeAsBytes(imageData);
} else {
print('Failed to decode GIF image');
}
}
assets
folder and add any kind of gif that you want!pubspec.yaml
add under flutter:
it must looks something like this...# The following section is specific to Flutter packages.
flutter:
assets:
- assets/SampleGIFImage_350kbmb.gif
lib/main.dart
use this code:import 'package:flutter/material.dart';
import 'dart:typed_data';
import 'package:image/image.dart' as img;
import 'package:flutter/services.dart' show rootBundle;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GIF Processing Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Uint8List? _originalImage;
Uint8List? _modifiedImage;
String _decodingStatus = "Decoding...";
String _grayscaleStatus = "Converting to Grayscale...";
String _encodingStatus = "Encoding...";
bool _isProcessing = false;
Future<void> _processImage() async {
setState(() {
_isProcessing = true;
_decodingStatus = "Decoding...";
_grayscaleStatus = "Converting to Grayscale...";
_encodingStatus = "Encoding...";
});
try {
// Step 1: Decoding the GIF
print('Step 1: Decoding...');
final byteData =
await rootBundle.load('assets/SampleGIFImage_350kbmb.gif');
final Uint8List bytes = byteData.buffer.asUint8List();
img.Image? decodedImage = img.decodeGif(bytes);
if (decodedImage != null) {
setState(() {
_originalImage = bytes;
_decodingStatus = "Decoding... Done"; // Turn green when done
});
print('Step 1: Decoding Done.');
// Step 2: Convert to Grayscale
print('Step 2: Converting to Grayscale...');
img.Image grayscaleImage = img.grayscale(decodedImage);
setState(() {
_grayscaleStatus = "Converting to Grayscale... Done"; // Turn green
});
print('Step 2: Converting to Grayscale Done.');
// Step 3: Re-encode the image
print('Step 3: Encoding...');
Uint8List modifiedBytes =
Uint8List.fromList(img.encodeGif(grayscaleImage));
setState(() {
_modifiedImage = modifiedBytes;
_encodingStatus = "Encoding... Done"; // Turn green
});
print('Step 3: Encoding Done.');
} else {
print('Failed to decode the image.');
}
} catch (e) {
print('Error during image processing: $e');
} finally {
setState(() {
_isProcessing = false;
});
}
}
Widget _buildStatus(String status) {
// Check if the step is done
bool isDone = status.endsWith("Done");
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
children: [
// Step status (turn green if done)
Expanded(
child: Text(
status,
style: TextStyle(
color: isDone ? Colors.green : Colors.black,
fontSize: 16,
),
),
),
// Show a check mark when step is done
if (isDone) Icon(Icons.check_circle, color: Colors.green),
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('GIF to Grayscale Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.all(16.0),
child: Text(
'This button will load a GIF, decode it, convert it into a grayscale version, and then re-encode it as a new GIF. You will see both the original and modified images below.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16),
),
),
ElevatedButton(
onPressed: _isProcessing
? null
: _processImage, // Disable button during processing
style: ElevatedButton.styleFrom(
padding:
const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
child: const Text(
'Process GIF Image',
style: TextStyle(fontSize: 18),
),
),
const SizedBox(height: 20),
// Display loading steps
_buildStatus(_decodingStatus),
_buildStatus(_grayscaleStatus),
_buildStatus(_encodingStatus),
const SizedBox(height: 20),
// Show loading indicator while processing
if (_isProcessing) const CircularProgressIndicator(),
// Display images when processing is complete
if (_originalImage != null && !_isProcessing) ...[
const Text('Original Image:', style: TextStyle(fontSize: 16)),
Image.memory(_originalImage!),
const SizedBox(height: 20),
const Text('Grayscale Image:', style: TextStyle(fontSize: 16)),
Image.memory(_modifiedImage!),
],
],
),
),
);
}
}
PS C:\Users\XXX\XXX\XXX\OpenLabX\XXX\flutter_packages_image> flutter run -d chrome
Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome... 9.1s
This app is linked to the debug service: ws://127.0.0.1:64300/B99EyLDA850=/ws
Debug service listening on ws://127.0.0.1:64300/B99EyLDA850=/ws
🔥 To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".
A Dart VM Service on Chrome is available at: http://127.0.0.1:64300/B99EyLDA850=
The Flutter DevTools debugger and profiler on Chrome is available at:
http://127.0.0.1:9101?uri=http://127.0.0.1:64300/B99EyLDA850=
Step 1: Decoding...
Step 1: Decoding Done.
Step 2: Converting to Grayscale...
Step 2: Converting to Grayscale Done.
Step 3: Encoding...
Step 3: Encoding Done.
Cheers :)
How to solve this problem?please help me.
ERROR message