颤动网：如何压缩图像/文件？ [英] Flutter Web: How Do You Compress an Image/File?

问题描述

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

我找不到任何与Web兼容的颤动软件包来做这件事。 有什么建议吗？

以下是我的代码：

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");
    }
  });
});
}

推荐答案

我花了几天时间试图弄清楚这一点。以下是您需要了解的内容。在我写这篇文章的时候，还没有合适的库/包可以压缩颤动网络中的图像。所以我最终在我的项目中使用了Java脚本代码。
不要担心，工作量不是很大。你也可以阅读我的博客获取完整的例子。

以下是您需要执行的操作。
1.在颤动网页index.html文件中添加浏览器图像压缩程序(压缩图像)CDN、文件保存程序(保存图像)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.好了，现在您可以在需要压缩图像的任何地方调用此函数了

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。
若要将压缩文件发送到Ffltter，请添加此行代码。

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

注意：
这将仅在颤动网中起作用。如果你在手机上运行，你会得到‘dart：js’或‘dart：html’编译错误。您可以通过基于平台导入来修复此问题。
希望对谁有帮助，谢谢

这篇关于颤动网：如何压缩图像/文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！