Flutter - Resize network image

生来就可爱ヽ(ⅴ<●) 提交于 2021-02-10 23:31:19

问题


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


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


来源:https://stackoverflow.com/questions/63063906/flutter-resize-network-image

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!