Flutter - Resize network image - flutter

Question

Is there a way to resize an image without having it previously written to storage?
I am using a pdf library that for the images needs the bytes of it.
What I do is get image with an http.get and I get the bytes to put it in the pdf.
The problem is that I need to resize the image BEFORE putting it in the pdf.
The only thing I have is the url of the image or the uint8list
Response response = await http.get(imageUrl);
Uint8List imgBytes = response.bodyBytes;
Later:
Image(
PdfImage.file(pdf.document,
bytes: imageBytes)
),
Pdf lib I use: https://pub.dev/packages/pdf

Answer 1

You can copy paste run full code below
You can use ui.instantiateImageCodec and specify targetHeight and targetWidth
You can see output image size become smaller after resize
code snippet
String imageUrl = 'https://picsum.photos/250?image=9';
http.Response response = await http.get(imageUrl);
originalUnit8List = response.bodyBytes;
ui.Image originalUiImage = await decodeImageFromList(originalUnit8List);
ByteData originalByteData = await originalUiImage.toByteData();
print('original image ByteData size is ${originalByteData.lengthInBytes}');
var codec = await ui.instantiateImageCodec(originalUnit8List,
targetHeight: 50, targetWidth: 50);
var frameInfo = await codec.getNextFrame();
ui.Image targetUiImage = frameInfo.image;
ByteData targetByteData =
await targetUiImage.toByteData(format: ui.ImageByteFormat.png);
print('target image ByteData size is ${targetByteData.lengthInBytes}');
targetlUinit8List = targetByteData.buffer.asUint8List();
output of working demo
I/flutter (17023): original image ByteData size is 250000
I/flutter (17023): target image ByteData size is 4060
working demo
full code
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:io';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Uint8List targetlUinit8List;
Uint8List originalUnit8List;
void _resizeImage() async {
String imageUrl = 'https://picsum.photos/250?image=9';
http.Response response = await http.get(imageUrl);
originalUnit8List = response.bodyBytes;
ui.Image originalUiImage = await decodeImageFromList(originalUnit8List);
ByteData originalByteData = await originalUiImage.toByteData();
print('original image ByteData size is ${originalByteData.lengthInBytes}');
var codec = await ui.instantiateImageCodec(originalUnit8List,
targetHeight: 50, targetWidth: 50);
var frameInfo = await codec.getNextFrame();
ui.Image targetUiImage = frameInfo.image;
ByteData targetByteData =
await targetUiImage.toByteData(format: ui.ImageByteFormat.png);
print('target image ByteData size is ${targetByteData.lengthInBytes}');
targetlUinit8List = targetByteData.buffer.asUint8List();
setState(() {});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
originalUnit8List == null
? Container()
: Image.memory(originalUnit8List),
targetlUinit8List == null
? Container()
: Image.memory(targetlUinit8List),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _resizeImage,
tooltip: 'Resize',
child: Icon(Icons.add),
),
);
}
}