flutter - Flutter Web - 从自定义绘画中保存图像 .png
问题描述
我正在将移动应用程序移植到 Web,此应用程序使用CustomPaint
小部件根据用户输入进行绘制。我RepaintBoundary
拍摄了油漆的屏幕截图并使用 save_in_gallery.dart
包将其保存在设备上。
在 Web 应用程序上,绘图部分工作正常,但我无法获取屏幕截图的部分或保存图像的部分。这是我用来保存的代码
RenderRepaintBoundary boundary =
globalKey.currentContext.findRenderObject();
ui.Image image = await boundary.toImage();
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData.buffer.asUint8List();
final res = await _imageSaver.saveImage(
imageBytes: pngBytes,
directoryName: "dir_name",
);
print(res);
print(pngBytes);
}
据我了解,dart:ui 包在 Flutter Web 上不起作用,但我没有找到任何替代方案。所以我的问题是:有一种方法可以拍摄 Custom Paint 的图像并将其保存为 Flutter Web 上的 Png 文件?
解决方案
将以下行添加到 web/index.html 文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/export/libs/FileSaver.js/FileSaver.min.js"></script>
然后将您传递pngBytes
给这样的方法:
import 'dart:html' as html; //ignore: avoid_web_libraries_in_flutter
import 'dart:js' as js; // ignore: avoid_web_libraries_in_flutter
class FileSaver {
void saveAs(List<int> bytes, String fileName)
=> js.context.callMethod("saveAs", [html.Blob([bytes]), fileName]);
}
推荐阅读
- xpath - join() 的“无效的联合类型”
- javascript - 如何在 textField 中缩短此错误?
- c++ - C++中整数输入的数据验证
- java - 无法在 IntelliJ 中运行功能文件 - 未定义的场景
- javascript - 在 Vue 首次加载时实现动画
- pandas - 如何在 word2vec 上应用熊猫数据
- python - 为什么我的 HAAR-Cascade 模型不准确?Python + OpenCV
- c# - 2021 年的深拷贝(不可序列化的对象)
- automation - 使用番茄工作法的 Windows 10 最好的自由对焦应用程序是什么?
- python - 查找两个 pandas 数据框列之间的 Glove 相似性