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

Question

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

标签： flutterflutter-dependenciesflutter-webflutter-pluginflutterwebviewplugin

Answer 1

您可以使用该RenderRepaintBoundary.toImage()功能将小部件转换为图像。然后您转换为byteData，然后转换为 ，然后对其Uint8list进行操作base64encode，Uint8List基本上使小部件成为您可以下载的锚元素。

我从我正在处理的一个项目中附加了一些示例代码，它允许用户生成一个二维码并将其下载到他们 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();
    
}