屏幕截图和图像下载在移动设备上的 Flutter Web 中不起作用

Question

你能帮我解决我面临的问题吗？

我正在尝试创建一个网络应用程序，允许用户下载生成内容的屏幕截图。

我正在使用

screenshot: ^3.0.0

进行屏幕截图，并使用

image_downloader_web: ^2.0.6

下载图像。

在桌面上它工作正常，但在移动设备上整个事情就崩溃了，尤其是在 safari 上。这两个软件包都会崩溃并拒绝工作，有时甚至会破坏整个界面。这是我正在使用的代码：

Future<void> downloadContent(String imageURL) async {
  final response = await http.get(Uri.parse(imageURL));

  final generatedContent = AspectRatio(
    aspectRatio: 4 / 5,
    child: SizedBox(
      height: 1350,
      width: 1080,
      child: Stack(
        children: [
          Positioned.fill(
            child: Image.memory(
              response.bodyBytes,
              fit: BoxFit.contain,
            ),
          ),
          // add extra content here like a signature or something
        ],
      ),
    ),
  );

  final screenshotController = ScreenshotController();

  final screenshot = await screenshotController.captureFromWidget(
    generatedContent,
  );

  await WebImageDownloader.downloadImageFromUInt8List(uInt8List: screenshot);
}

Answer 1

提供的代码运行良好。但是，用于捕获屏幕截图的 .toImage() 函数与 HTML 渲染器不兼容。要解决此问题，请考虑使用支持此功能的 CanvasKit 渲染器。

flutter run -d chrome --web-renderer canvaskit

在调试模式下检查移动设备。

第1步：

flutter run -d web-server --web-renderer canvaskit  --web-port 8080 --web-hostname 0.0.0.0 

第2步： 将您的手机连接到与系统相同的网络 -> 转到浏览器（safari/chrome） -> 输入系统的 IP 和端口。

http://your_ip:8080

有关 Web 渲染器的更多信息：Web 渲染器