颤振网页 - 从自定义画图保存图像.png

Question

我正在将移动应用程序移植到 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 上不起作用，但我没有找到任何替代方案。所以我的问题是：有一种方法可以拍摄自定义绘画的图像并将其另存为 Flutter Web 上的 Png 文件？

Answer 1

将以下行添加到 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]);
}