Dart 颤振将网络映像保存到本地目录

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

---

我不熟悉图像的编码和解码。有人能给我指出正确的方向吗？

看这个

这个问题有一个简单的答案，也有一个更复杂的答案。我将描述复杂的一个，然后给你简单的一个

复杂的答案是，您可以使用

NetworkImage

手动缓存图像，解析图像并获取图像流。一旦你有了图像流，你就可以使用Flatter的文件读写功能将其保存到文件系统中（这是一个了解更多信息的好资源）——你还需要使用一个名为PathProvider的插件，它可以为iOS和Android获取正确的路径，这在该链接中有描述。您还希望跟踪您下载的所有图像，并可能在一定时间后将其删除。在使用这些文件创建

Image

widget之前，您还必须读回这些文件

这给了你很多控制权，但这是一点工作（虽然不是一个疯狂的数量，但如果你是一个新的颤振可能不是你想做的事情，取决于你为什么要保存图像）

答案很简单，就是救人！其他人已经遇到了这个问题，并编写了一个插件为您解决它，所以您不必考虑它

有关插件的信息，请参阅

您需要在

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

请注意，这将下载并显示图像-如果您想单独执行这些操作，可以使用

新缓存网络图像提供程序（url）

，并使用

新图像

按照此url进行显示

代码片段

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:http/http.dart' as http;

class NetworkToLocalImage extends StatefulWidget{
 String url;

 NetworkToLocalImage(this.url);

 @override
 _LoadImages createState() => new _LoadImages(url);
 }

class _LoadImages extends State<NetworkToLocalImage>{

 String url;
 String filename;
 var dataBytes;

 _LoadImages(this.url){
 filename = Uri.parse(url).pathSegments.last;
 downloadImage().then((bytes){
  setState(() {
    dataBytes = bytes;
  });
});
}

Future<dynamic> downloadImage() async {
String dir = (await getApplicationDocumentsDirectory()).path;
File file = new File('$dir/$filename');

if (file.existsSync()) {
  print('file already exist');
  var image = await file.readAsBytes();
  return image;
} else {
  print('file not found downloading from server');
  var request = await http.get(url,);
  var bytes = await request.bodyBytes;//close();
  await file.writeAsBytes(bytes);
  print(file.path);
  return bytes;
}
}

 @override
 Widget build(BuildContext context) {
 // TODO: implement build
 if(dataBytes!=null)
 return new Image.memory(dataBytes);
 else return new CircularProgressIndicator();
}
}

导入“包装：颤振/材料.省道”；
导入“dart:async”；
导入“dart:io”；
导入“package:path_provider/path_provider.dart”；
将“package:http/http.dart”导入为http；
类NetworkToLocalImage扩展StatefulWidget{
字符串url；
NetworkToLocalImage（this.url）；
@凌驾
_LoadImages createState（）=>new\u LoadImages（url）；
}
类_LoadImages扩展状态{
字符串url；
字符串文件名；
var数据字节；
_LoadImages（this.url）{
filename=Uri.parse（url）.pathSegments.last；
下载图像（）。然后（（字节）{
设置状态（）{
数据字节=字节；
});
});
}
Future downloadImage（）异步{
字符串dir=（等待getApplicationDocumentsDirectory（））.path；
File File=新文件（“$dir/$filename”）；
if（file.existsSync（））{
打印（'文件已存在'）；
var image=wait file.readAsBytes（）；
返回图像；
}否则{
打印（'从服务器下载时未找到文件'）；
var request=wait http.get（url，）；
var bytes=wait request.bodyBytes；//close（）；
等待文件。writeAsBytes（字节）；
打印（file.path）；
返回字节；
}
}
@凌驾
小部件构建（构建上下文）{
//TODO:实现构建
如果（数据字节！=null）
返回新的映像内存（数据字节）；
否则返回新的循环ProgressIndicator（）；
}
}

在代码和颤振文档周围徘徊之后。我已经找到了适用于iOS和Android的方法和类，现在开始

助手类

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

导入'dart:async'；
导入“dart:io”作为io；
导入“package:image/image.dart”；
导入“包：flatter_cache_manager/flatter_cache_manager.dart”；
导入“package:path_provider/path_provider.dart”；
类保存文件{
未来获取\u本地路径异步{
最终目录=等待getApplicationDocumentsDirectory（）；
返回directory.path；
}
未来getImageFromNetwork（字符串url）异步{
var cacheManager=wait cacheManager.getInstance（）；
Io.File File=wait cacheManager.getFile（url）；
返回文件；
}
将来的saveImage（字符串url）异步{
最终文件=等待getImageFromNetwork（url）；
//检索设备的本地路径
var path=await\u localPath；
Image=decodeImage（file.readAsBytesSync（））；
图像缩略图=复制调整大小（图像，120）；
//将缩略图另存为PNG。
返回新的Io.File（“$path/${DateTime.now（）.toUtc（）.toIso8601String（）}.png”）
..writeAsBytesSync（encodePng（缩略图））；
}
}

类的用法

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

类HomePageState扩展状态{
未来(Future)推出,；
小部件\u showResult（构建上下文上下文，异步快照）{
如果（！snapshot.hasError）{
返回文本（“图像已保存”）；
}
否则{
返回常量文本（“无法保存图像”）；
}
}
Future\u saveNetworkImage（字符串url）异步{
试一试{
等待SaveFile（）.saveImage（url）；
}
关于错误捕获（e）{
抛出“保存时发生错误”；
}
}
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
钥匙：_scaffoldKey，
appBar：新的appBar(
标题：新文本（“图像”），
),
正文：专栏(
儿童：[
图标按钮（图标：图标（Icons.save），打开按钮：（）{
设置状态（）{
_已启动=\u saveNetworkImage（url）；
});
}),
新FutureBuilder（future:_发布，builder:_展示结果），
],
),
);
}
}

如果您只想将图像（例如：a.png）保存到设备上，您可以通过简单的get（http/http.dart）和文件（dart:io）轻松实现

为此，您可以使用以下示例：

var response=wait http.get（imgUrl）；
Directory documentDirectory=等待getApplicationDocumentsDirectory（）；
File File=新文件（join（documentDirectory.path，'imagetest.png'）；
file.writeAsBytesSync（response.bodyBytes）；//这是一个在真实磁盘上的同步操作
//您可能更喜欢使用writeAsByte并处理其未来的应用程序

注意，在上面的例子中，我使用了“路径提供者”pa

await ImageDownloader.downloadImage(url);

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Image',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Test Image'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  initState() {
    _downloadAndSavePhoto();
    super.initState();
  }

  _downloadAndSavePhoto() async {
    // Get file from internet
    var url = "https://www.tottus.cl/static/img/productos/20104355_2.jpg"; //%%%
    var response = await get(url); //%%%
    // documentDirectory is the unique device path to the area you'll be saving in
    var documentDirectory = await getApplicationDocumentsDirectory();
    var firstPath = documentDirectory.path + "/images"; //%%%
    //You'll have to manually create subdirectories
    await Directory(firstPath).create(recursive: true); //%%%
    // Name the file, create the file, and save in byte form.
    var filePathAndName = documentDirectory.path + '/images/pic.jpg';
    File file2 = new File(filePathAndName); //%%%
    file2.writeAsBytesSync(response.bodyBytes); //%%%
    setState(() {
      // When the data is available, display it
      imageData = filePathAndName;
      dataLoaded = true;
    });
  }

  String imageData;
  bool dataLoaded = false;

  @override
  Widget build(BuildContext context) {
    if (dataLoaded) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // imageData holds the path AND the name of the picture.
              Image.file(File(imageData), width: 600.0, height: 290.0)
            ],
          ),
        ),
      );
    } else {
      return CircularProgressIndicator(
        backgroundColor: Colors.cyan,
        strokeWidth: 5,
      );
    }
  }
}

http: ^0.12.0+2
  path_provider: 1.5.0

 Future _upIm()async {
      final StorageReference firebaseStorageRef =
      FirebaseStorage.instance.ref().child(DateTime.now().toString());
      final StorageUploadTask task =
      firebaseStorageRef.putFile(_storedImage);

      var downUrl=await (await task.onComplete).ref.getDownloadURL();
      var url =downUrl.toString();
      print(url);

      setState(() {
        uploadImage=url;
      });

    }

final DefaultCacheManager defaultCacheManager = DefaultCacheManager();
final fileInfo = await defaultCacheManager.getFileFromCache(imageUrl);
ImageGallerySaver.saveImage(image);

// save raw data to gallery with permission
static Future<void> saveImage(Uint8List image) async {
  try {
    if (Platform.isIOS) {
      await PermissionHandler().requestPermissions([PermissionGroup.photos]);
      PermissionStatus permission = await PermissionHandler().checkPermissionStatus(PermissionGroup.photos);
      if (permission == PermissionStatus.granted) {
      } else {
        throw 'denied';
      }
    } else if (Platform.isAndroid) {
      await PermissionHandler().requestPermissions([PermissionGroup.storage]);
      PermissionStatus permission = await PermissionHandler().checkPermissionStatus(PermissionGroup.storage);
      if (permission == PermissionStatus.granted) {
      } else {
        throw 'denied';
      }
    }
    await ImageGallerySaver.saveImage(image);
  } catch (e) {
    throw e;
  }
}