如何在 Flutter Web 中将输出小部件屏幕截图下载为图像？

Question

我想在 Flutter Web 中以图像文件的形式下载小部件屏幕截图。有什么可以做的吗？ 顺便说一句，将小部件转换为 Uint8List，我正在使用截图插件。

Answer 1

您可以使用RenderRepaintBoundary.toImage() 函数将小部件转换为图像。然后转换为byteData，然后转换为Uint8list，然后在Uint8List 上执行base64encode，基本上使小部件成为一个锚元素，然后您可以下载它。

我附上了一些来自我正在处理的项目的示例代码，它允许用户生成二维码并将其下载到他们 PC 上的下载文件夹以显示我在说什么。

确保您已在 dart 文件顶部导入 html：

import 'dart:html' as html;

然后，代码将如下所示：

final key = GlobalKey();
 final qrTextController = TextEditingController();    
 //this code "wraps" the qr widget into an image format
RenderRepaintBoundary boundary = key.currentContext!
    .findRenderObject() as RenderRepaintBoundary;
//captures qr image 
var image = await boundary.toImage();

String qrName = qrTextController.text;

//running on web
  if(kIsWeb){
  print('registering as a web device');
  ByteData? byteData = await image.toByteData(format: ImageByteFormat.png);
  Uint8List pngBytes = byteData!.buffer.asUint8List();
      final _base64 = base64Encode(pngBytes);
      final anchor =
          html.AnchorElement(href: 'data:application/octet-stream;base64,$_base64')
            ..download = "image.png"
            ..target = 'blank';
    
      html.document.body!.append(anchor);
      anchor.click();
      anchor.remove();
    
}