如何在 Flutter web 上编码和下载 png

如何解决如何在 Flutter web 上编码和下载 png

我正在尝试截取小部件的屏幕截图并将其另存为 png。

它适用于 macos 和 ios，但不适用于桌面（chrome）。

从浏览器下载的文件似乎没有正确编码，我尝试了很多不同的编码，但无法正常工作。

如果有人知道如何对图像进行编码，以便在网络上也能正确下载，那就太好了。

    final boundary = _boundaryKey.currentContext.findRenderObject() as RenderRepaintBoundary;
    final image = await boundary.toImage(pixelRatio: 2);
    final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    final pngBytes = byteData.buffer.asUint8List();

    if (kIsWeb) {
        final blob = html.Blob(<dynamic>[base64Encode(pngBytes)],'image/png');
        final anchorElement = html.AnchorElement(
          href: html.Url.createObjectURLFromBlob(blob),)
          ..setAttribute('download','details.png')
          ..click();
    } else {
        await File('details_${widget.order.id}'.trim().replaceAll(' ','_')).writeAsBytes(pngBytes);
    }

解决方法

诀窍是在创建 'application/octet-stream' 时设置 Blob

final fileName = 'details_${widget.order.id.trim().replaceAll(' ','_')}';
final boundary = _boundaryKey.currentContext.findRenderObject() as RenderRepaintBoundary;
final image = await boundary.toImage(pixelRatio: 2);
final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
final pngBytes = byteData.buffer.asUint8List();
final blob = html.Blob(<dynamic>[pngBytes],'application/octet-stream');
html.AnchorElement(href: html.Url.createObjectUrlFromBlob(blob))
    ..setAttribute('download',fileName)
    ..click();