flutter CachedNetworkImage How do I get the image bytes from the imageBuilder's imageProvider

CachedNetworkImage(
                  width: 100,
                  height: 300,
                  imageUrl: "http://cropper-sz.oss-cn-shenzhen.aliyuncs.com/SCH/RLM2003EI/BUILD_MAP/1cd5bc.png",
                  imageBuilder: (context, imageProvider) {
                     ******
                  },
                  placeholder: (context, url) => CircularProgressIndicator(),
                  errorWidget: (context, url, error) => Icon(Icons.error),
                )

i want The grayscale image after the cache is processed into a color image, and return it

mg.Image? image = Img.decodePng(asUint8List);
                              int? width = image?.width;
                              int? height = image?.height;
                              Img.Image newImg = Img.Image.fromBytes(width!, height!, image!.data);
                              for (int h = 0; h < height; h  ) {
                                for (int w = 0; w < width; w  ) {
                                  var pixel = newImg.getPixel(w, h);
                                  if (pixel == Img.Color.fromRgba(255, 255, 255, 255)) {
                                    newImg.setPixelRgba(w, h, 255, 255, 255, 0);
                                  }              
                                  else if (pixel == Img.Color.fromRgba(252, 252, 252, 255)) {
                                    newImg.setPixelRgba(w, h, 150, 150, 150, 0);
                                  } else if (pixel == Img.Color.fromRgba(0, 0, 0, 255)) {
                                    newImg.setPixelRgba(w, h, 16, 188, 147, 255);
                                  } else if (pixel == Img.Color.fromRgba(100, 100, 100, 255)) {
                                    newImg.setPixelRgba(w, h, 84, 74, 96, 255);
                                  }
                                }
                              }

CodePudding user response：

Try like this to get bytes from imgae provider

imageProvider
              .obtainKey(createLocalImageConfiguration(context))
              .then((value) {
            imageProvider.load(value, (bytes,
                {allowUpscaling: true,
                cacheHeight: 200,
                cacheWidth: 200}) async {
              var asUint8List = bytes.buffer.asUint8List();

              var f = File(pt.path   "/m.jpg");
              file = await f.writeAsBytes(asUint8List);
              setState(() {
                file;
              });

              return instantiateImageCodec(asUint8List);
            });
          });

Your widgetmay like this

  CachedNetworkImage(
    width: 100,
    height: 300,
    imageUrl: "https://images.indianexpress.com/2019/09/toys.jpg",
    // "http://cropper-sz.oss-cn-shenzhen.aliyuncs.com/SCH/RLM2003EI/BUILD_MAP/1cd5bc.png",
    imageBuilder: (context, imageProvider) {
      imageProvider
          .obtainKey(createLocalImageConfiguration(context))
          .then((value) {
        imageProvider.load(value, (bytes,
            {allowUpscaling: true,
            cacheHeight: 200,
            cacheWidth: 200}) async {
          var asUint8List = bytes.buffer.asUint8List();

          var f = File(pt.path   "/m.jpg");
          file = await f.writeAsBytes(asUint8List);
          setState(() {
            file;
          });

          return instantiateImageCodec(asUint8List);
        });
      });



      return Image(
        image: imageProvider,
      );
    },
    placeholder: (context, url) => CircularProgressIndicator(),
    errorWidget: (context, url, error) => Icon(Icons.error),
  )

What i did here? Just fetch image from image provider as bytes and save into file then update the 3rd image.

Sample Code

import 'dart:io';
import 'dart:ui';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await setuppath();
  runApp(MYAppWithoutFlicker());
}

var pt;
var file = null;

Future<void> setuppath() async {
  pt = await getTemporaryDirectory();
}

class MYAppWithoutFlicker extends StatefulWidget {
  MYAppWithoutFlicker({Key? key}) : super(key: key);

  @override
  State<MYAppWithoutFlicker> createState() => _MYAppWithoutFlickerState();
}

class _MYAppWithoutFlickerState extends State<MYAppWithoutFlicker> {
  // var decode = (bytes, {allowUpscaling, cacheHeight, cacheWidth}) {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.lightGreen,
      child: Column(
        children: [
          CachedNetworkImage(
            width: 100,
            height: 300,
            imageUrl: "https://images.indianexpress.com/2019/09/toys.jpg",
            // "http://cropper-sz.oss-cn-shenzhen.aliyuncs.com/SCH/RLM2003EI/BUILD_MAP/1cd5bc.png",
            imageBuilder: (context, imageProvider) {
              imageProvider
                  .obtainKey(createLocalImageConfiguration(context))
                  .then((value) {
                imageProvider.load(value, (bytes,
                    {allowUpscaling: true,
                    cacheHeight: 200,
                    cacheWidth: 200}) async {
                  var asUint8List = bytes.buffer.asUint8List();

                  var f = File(pt.path   "/m.jpg");
                  file = await f.writeAsBytes(asUint8List);
                  setState(() {
                    file;
                  });

                  return instantiateImageCodec(asUint8List);
                });
              });



              return Image(
                image: imageProvider,
              );
            },
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
          Container(
              height: 100,
              width: 100,
              child: Image.file(File(pt.path   "/m2.jpg"))),
          Container(
              height: 100,
              width: 100,
              child: Image.file(file ?? File(pt.path   "/m2.jpg")))
        ],
      ),
    );
  }

  @override
  void initState() {}
}