Flutter将网络映像保存到本地目录

Question

在Flutter中如何将图像从网络保存到本地目录.

我是编码和解码图像的新手.谁能指出我正确的方向？

Answer 1

有一个简单的答案和一个更复杂的答案.我将描述复杂的一个,然后给你一个简单的.

复杂的答案是,您可以通过使用NetworkImage,解析图像和获取图像流来手动缓存图像.一旦你有了图像流,就可以使用flutter的文件读写功能将它保存到文件系统中(这是了解更多信息的一个很好的资源) - 你还需要使用一个名为PathProvider的插件来获取两者的正确路径该链接中描述的iOS和Android.您还需要跟踪您下载的所有图像,并可能在一定时间后删除它们.在使用它们创建Image小部件之前,您还必须先阅读这些文件.

这给了你很多控制权,但是有点工作(虽然不是一个疯狂的数量,但如果你是新手,可能不是你想要做的事情,这取决于你想要保存图像的原因).

简单的答案是拯救包!其他人已经遇到过这个问题并写了一个插件来解决它,所以你不必考虑它!

有关该插件的信息,请参阅cached_network_image包.

您需要添加到您的依赖项中 pubspec.yaml

dependencies:
  cached_network_image: "^0.3.0"

导入它:

import 'package:cached_network_image/cached_network_image.dart';

并使用它!

new CachedNetworkImage(
   imageUrl: "http://imageurl.png",
   placeholder: new CircularProgressIndicator(),
   errorWidget: new Icon(Icons.error),
),

请注意,这会下载并显示图像 - 如果您想单独执行这些操作,则可以使用a new CachedNetworkImageProvider(url)并使用它进行显示new Image.

Answer 2

徘徊在代码和颤动的文档后.我找到了适用于iOS和Android的方法和类,现在就可以了.

助手类

import 'dart:async';
import 'dart:io' as Io;
import 'package:image/image.dart';

import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:path_provider/path_provider.dart';
class SaveFile {

  Future<String> get _localPath async {
    final directory = await getApplicationDocumentsDirectory();

    return directory.path;
  }
   Future<Io.File> getImageFromNetwork(String url) async {

     var cacheManager = await CacheManager.getInstance();
     Io.File file = await cacheManager.getFile(url);
     return file;
   }

   Future<Io.File> saveImage(String url) async {

    final file = await getImageFromNetwork(url);
    //retrieve local path for device
    var path = await _localPath;
    Image image = decodeImage(file.readAsBytesSync());

    Image thumbnail = copyResize(image, 120);

    // Save the thumbnail as a PNG.
    return new Io.File('$path/${DateTime.now().toUtc().toIso8601String()}.png')
      ..writeAsBytesSync(encodePng(thumbnail));
  }
}

类的用法

class HomePageState extends State<HomePage>{

Future<Null> _launched ;

  Widget _showResult(BuildContext context, AsyncSnapshot<Null> snapshot){
    if(!snapshot.hasError){
      return Text('Image is saved');
    }
    else{
      return const Text('Unable to save image');
    }
  }

  Future<Null> _saveNetworkImage(String url) async{
    try{
       await SaveFile().saveImage(url);
    }
    on Error catch(e){
      throw 'Error has occured while saving';
    }
  }
   @override
   Widget Build(BuildContext context){
       return new Scaffold(
            key: _scaffoldKey,
            appBar: new AppBar(
                title: new Text('Image'),
            ),
            body: Column(
                  children: <Widget>[
                       IconButton(icon: Icon(Icons.save), onPressed: (){
                     setState(() {
                       _launched =_saveNetworkImage(url);
                     });
                    }),
                      new FutureBuilder<Null>(future: _launched ,builder: _showResult),
                  ],
            ),
          );
   }
}

Answer 3

如果只需要将图像（例如：.png）保存到设备，则可以使用简单的get（http / http.dart）和File（dart：io）轻松实现此目的。

为此，您可以基于以下示例：

var response = await get(imgUrl);
documentDirectory = await getApplicationDocumentsDirectory();

File file = new File(
  join(documentDirectory.path, 'imagetest.png')
);

file.writeAsBytesSync(response.bodyBytes);

请注意，在上述情况下，我使用了来自dart pub的“ path_provider”包。总体而言，您的导入中至少应包含以下项目：

import 'dart:io';
import 'package:http/http.dart' show get;
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';