如何从网络下载图像并将其保存在本地目录中？

Posted 2023-02-23

【中文标题】如何从网络下载图像并将其保存在本地目录中？

【英文标题】：How can I download an image from the network and save it in a locally directory?

【发布时间】：2021-07-04 21:12:05

【问题描述】：

我正在尝试从网络下载图像并将其保存在本地计算机的“下载”文件夹中。我需要为flutter web实现这一点，我不知道该怎么做。

我发现了一些关于如何实现android和ios下载和保存文件或图像的问题，例如Flutter save a network image to local directory。我还看了How do I read and write image file locally for Flutter Web?。但是，我看不出这些答案对我有什么帮助。

我认为对于 IOS 和 Flutter 我可以使用以下功能而不会出现任何错误，但我不知道文件在我的模拟器中保存在哪里：

  void _downloadAndSavePhoto() async 
    var response = await http.get(Uri.parse(imageUrl));

    try 
      Directory tempDir = await getTemporaryDirectory();
      String tempPath = tempDir.path;

      File file = File('$tempPath/$name.jpeg');
      file.writeAsBytesSync(response.bodyBytes);
     catch (e) 
      print(e.toString());
    
  

但是，当我尝试上述 Flutter Web 功能时（使用 chrome 模拟器），我收到以下错误：

MissingPluginException(No implementation found for method getTemporaryDirectory on channel plugins.flutter.io/path_provider)

如果有人知道一种方法或有一些实现该功能的建议，我会非常高兴。

提前致谢！

【问题讨论】：

解决方案是***.com/questions/49455079/…

【参考方案1】：

为了实现这一点，我建议您首先将 universal_html 包添加到您的 pubspec.yaml 中，因为在较新版本的 Flutter 中，您会收到导入 dart:html 的警告。

在pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.1 // add http
  universal_html: ^2.0.8 // add universal_html

我创建了一个完整的 Flutter web 应用示例，你可以试试，但你唯一感兴趣的是downloadImage 函数。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

// if you don't add universal_html to your dependencies you should
// write import 'dart:html' as html; instead
import 'package:universal_html/html.dart' as html;

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

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  


class MyHomePage extends StatefulWidget 
  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  final imageUrls = <String>[
    'https://images.pexels.com/photos/208745/pexels-photo-208745.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    'https://images.pexels.com/photos/1470707/pexels-photo-1470707.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    'https://images.pexels.com/photos/2671089/pexels-photo-2671089.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    'https://images.pexels.com/photos/2670273/pexels-photo-2670273.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
  ];

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: GridView.count(
        crossAxisCount: 3,
        children: imageUrls
            .map(
              (imageUrl) => ImageCard(imageUrl: imageUrl),
            )
            .toList(),
      ),
    );
  


class ImageCard extends StatefulWidget 
  @override
  _ImageCardState createState() => _ImageCardState();

  final String imageUrl;
  ImageCard(
    @required this.imageUrl,
  );


class _ImageCardState extends State<ImageCard> 
  Future<void> downloadImage(String imageUrl) async 
    try 
      // first we make a request to the url like you did
      // in the android and ios version
      final http.Response r = await http.get(
        Uri.parse(imageUrl),
      );
      
      // we get the bytes from the body
      final data = r.bodyBytes;
      // and encode them to base64
      final base64data = base64Encode(data);
      
      // then we create and AnchorElement with the html package
      final a = html.AnchorElement(href: 'data:image/jpeg;base64,$base64data');
      
      // set the name of the file we want the image to get
      // downloaded to
      a.download = 'download.jpg';
      
      // and we click the AnchorElement which downloads the image
      a.click();
      // finally we remove the AnchorElement
      a.remove();
     catch (e) 
      print(e);
    
  

  @override
  Widget build(BuildContext context) 
    return InkWell(
      onTap: () => downloadImage(widget.imageUrl),
      child: Card(
        child: Image.network(
          widget.imageUrl,
          fit: BoxFit.cover,
        ),
      ),
    );
  

【讨论】：

我认为这可能可行。但是，我有一张卡片列表，我需要能够在不打开另一个窗口的情况下下载每张卡片的图像。我可以在 Flutter Web 中以某种方式做到这一点吗？

您有图片网址列表吗？你的卡片列表是什么样的？

我还没有实现任何代码。我只是想知道是否可以在颤振网络上做到这一点，以及实现这一目标的最佳方法是什么？我有适用于 IOS 和 android 的代码，但它不适用于 Flutter Web。

你的android和ios代码是什么样的？

我更新了问题，现在已经添加了适用于android和IOS的代码