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上不起作用，但是我没有找到其他选择。所以我的问题是：有没有办法拍摄Custom Paint的图像并将其另存为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]);
}

Flutter Web-从Custom Paint保存图像.png

1 个答案: