Как загрузить скриншот выходного виджета в виде изображения в Flutter Web?

#flutter #flutter-dependencies #flutter-web #flutter-plugin #flutterwebviewplugin

Вопрос:

Я хочу загрузить скриншоты виджетов в виде файла изображения в flutter Web. Есть ли что-нибудь для этого? Кстати, для преобразования виджета в Uint8List я использую плагин для скриншотов.

Ответ №1:

Вы можете использовать эту RenderRepaintBoundary.toImage() функцию для преобразования виджета в изображение. Затем вы конвертируете в byteData , затем в Uint8list , затем делаете base64encode это Uint8List и в основном делаете виджет элементом привязки, который затем можно загрузить.

Я прикрепил пример кода из проекта, над которым я работал, который позволяет пользователю генерировать QR-код и загружать его в папку «Загрузки» на своем ПК, чтобы показать, о чем я говорю.

Убедитесь, что вы импортировали html в верхней части файла dart:

 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();
    
}