Flutter - Resize network image

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),
      ),
    );
  }
}