上传前调整Flutter图片大小

Question

在上传到服务器之前，我需要调整图片大小。

我正在使用 io 和 image 包。

import 'dart:io';  
import 'package:image/image.dart' as Img;

使用此函数

uploadImages(File image_File) async {

    Img.Image image_temp = Img.decodeImage(image_File.readAsBytesSync());

    Img.Image resized_img = Img.copyResize(image_temp, 800);

    File resized_file = File('resized_img.jpg')
      ..writeAsBytesSync(Img.encodeJpg(resized_img));

    var stream = new http.ByteStream(DelegatingStream.typed(resized_file.openRead()));
    var length = await resized_file.length();

    var uri = Uri.parse("https://myserver.com/upload.php");

    var request = new http.MultipartRequest("POST", uri);
    var multipartFile = new http.MultipartFile('file', stream, length,
        filename: p.basename("resized_image.jpg"));


    request.files.add(multipartFile);
    var response = await request.send();
    print(response.statusCode);
    response.stream.transform(utf8.decoder).listen((value) {
      print(value);
    });
  }

当我运行这段代码时，应用程序会冻结，图片也没有上传到服务器。

- Niccolo

---

你的调试控制台中没有错误吗？ - F-1

[VERBOSE-2:shell.cc(181)] Dart错误：未处理的异常： FileSystemException：无法打开文件，路径= 'thumbnail.jpg'（OS错误：操作不允许，errno = 1） ＃0 _File.throwIfError（dart：io / file_impl.dart：647：7） ＃1 _File.openSync（dart：io / file_impl.dart：491：5） ＃2 _File.writeAsBytesSync（dart：io / file_impl.dart：616：31） - Niccolo

所以问题在于它无法打开名为“thumbnail.jpg”的文件。这是一个资产还是下载的图像？它在哪里寻找这个图像？ - F-1

@user7380419 你不能直接像那样访问文件系统中的文件。你必须使用path_provider插件将文件写入应用程序的临时目录或应用程序目录。但实际上，下面Richard的答案是一个更好的选择。 - Kirollos Morkos

我该如何将resized_img转换为Unit8List？ - temirbek

Answer 1

不必将其写入文件; 您可以直接从内存发送调整大小的图像。

uploadImages(File image_File) async {
  img.Image image_temp = img.decodeImage(image_File.readAsBytesSync());
  img.Image resized_img = img.copyResize(image_temp, 800);

  var request = new http.MultipartRequest(
    'POST',
    Uri.parse('https://myserver.com/upload.php'),
  );
  var multipartFile = new http.MultipartFile.fromBytes(
    'file',
    img.encodeJpg(resized_img),
    filename: 'resized_image.jpg',
    contentType: MediaType.parse('image/jpeg'),
  );

  request.files.add(multipartFile);
  var response = await request.send();
  print(response.statusCode);
  response.stream.transform(utf8.decoder).listen((value) {
    print(value);
  });
}

注意：当导入软件包时，应使用小写标签（即img）。您还需要导入package:http_parser才能获得MediaType。

- Richard Heap

---

嗨，谢谢Richard！这个函数运行良好，但是调整一张图片需要2分钟，这正常吗？ - Niccolo

是的。图像包在纯dart中运行，并且没有进行过重度优化。在可能的情况下，以较低的分辨率捕获图像。例如，请参考从Flutter Image_Picker插件获取的图像大小太大。 - Richard Heap

Answer 2

当我使用时

package:image/image.dart

您所面临的问题如下：

• 在转换图像时显示空白页面（可能是在压缩图像时处理时间过长）
• 压缩后的图像被拉伸，不美观

然后使用了以下插件，同样的功能正常运行，甚至更快、达到了我的预期。

https://github.com/btastic/flutter_native_image.git

上述链接提供了步骤和方法。

- Anand saga