暂时,我将创建一个云功能来调整文件的大小/压缩,将其上传到Firebase存储中作为解决方法。
下面是有关如何解决该问题的人员的链接:https://www.youtube.com/watch?v=OKW8x8-qYs0
,
好吧,我花了几天时间试图弄清楚。这是您需要了解的内容。在我写这篇文章的时候,没有合适的库/包可以在 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
});
注意
这仅适用于颤振网络。如果您在移动设备上运行,您将收到“dart:js”或“dart:html”编译错误。您可以通过基于平台的导入来解决此问题。
希望对大家有所帮助,谢谢
本文链接:https://www.f2er.com/2629894.html