Flutter Web：如何压缩图像/文件？

Question

Flutter Web 目前处于测试阶段，因此缺乏有关如何执行此操作的可用信息/资源。

我找不到任何与 web 兼容的 flutter 包来做到这一点。有小费吗？

这是我的代码：

uploadImage() async {
File file;
FileReader fileReader = FileReader();
InputElement uploadInput = FileUploadInputElement();
uploadInput.click();
uploadInput.onChange.listen((event) {
  file = uploadInput.files.first;
  fileReader.readAsDataUrl(file);
  fileReader.onLoadEnd.listen((event) {
    if (file.type == "image/jpg" || file.type == "image/jpeg" || file.type == "image/png") {
      String base64FileString = fileReader.result.toString().split(',')[1];

      //COMPRESS FILE HERE

      setState(() {
        userImgFile = file;
        userImageByteMemory = base64Decode(base64FileString);
      });
    } else {
      CustomAlerts().showErrorAlert(context, "Image Upload Error", "Please Upload a Valid Image");
    }
  });
});
}

Answer 1

好吧，我花了几天时间试图弄清楚。这是您需要了解的内容。在我写这篇文章时，没有合适的库/包可以在 flutter web 中压缩图像。所以我最终在我的项目中使用了 javascript 代码。
别担心，这不是太多工作。您也可以阅读我的博客以获取完整的示例。

这是您需要做的。
1. 在你的flutter web index.html文件中添加浏览器图像压缩器（压缩图像）cdn，filesaver（保存图像）cdn，
同时创建新的js文件名app.js并导入它。

<script type="text/javascript"
          src="https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.13/dist/browser-image-compression.js"></script>
  <script src="http://cdn.jsdelivr.net/g/filesaver.js"></script>
  <script src="app.js" defer></script>

2. 现在导入已完成，更新 app.js 如下

function compressAndDownloadImage(base64) {
        var url = base64;

        fetch(url)
            .then(res => res.blob())
            .then(blob => {
                var imageFile = blob;
                console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
                console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);

                var options = {
                    maxSizeMB: 0.2,//right now max size is 200kb you can change
                    maxWidthOrHeight: 1920,
                    useWebWorker: true
                }
                imageCompression(imageFile, options)
                    .then(function (compressedFile) {
                        console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
                        console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
                        console.log(compressedFile);
                        saveAs(new Blob([compressedFile], { type: "image/jpeg" }), Math.floor(Date.now() / 1000) + '.jpeg');
                        return uploadToServer(compressedFile); // write your own logic
                    })
                    .catch(function (error) {
                        console.log(error.message);
                    });
            })

    }

3. 好了，现在你可以在任何需要压缩图像的地方调用这个函数了，可以从任何地方调用这个 dart 函数

import 'dart:js' as js; //import first

//call compressAndDownloadImage with base64 image you want to compress
var base64data="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
js.context.callMethod(
            'compressAndDownloadImage', ['$base64data']);

更新
如果您希望通过 dart 将文件上传到服务器。然后将文件发送到 dart 并从那里发送到服务器/firebase。
要将压缩文件发送到 flutter，请添加这行代码。

window.parent.postMessage(compressedFile, "*");

并且要在颤振中接收，请确保您具有此侦听器功能。
import 'dart:html' as html;

window.addEventListener("message", (event) {
  html.MessageEvent event2 = event;
  html.Blob blob = event2.data;
  print(blob.type); // you can do whatever you want in dart
});

注意
这仅适用于 flutter web。如果您在移动设备上运行，您将收到“dart:js”或“dart:html”编译错误。您可以通过基于平台导入来修复此问题。
希望它可以帮助别人，谢谢

Answer 2

目前，我将创建一个云函数来在将文件上传到后端的 firebase 存储时调整文件大小/压缩文件作为解决方法。

对于需要解决方法的人来说，这里有一个链接，说明如何执行此操作，直到问题得到解决：https://www.youtube.com/watch ?v=OKW8x8-qYs0

编辑

图像选择器库已更新。解决方案可以在这里找到