The takeScreenshot API did not achieve its intended effect

[peter100u]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

I am developing an app for processing creative programming, and I want to use webview to take screenshots of content as a way to share my work. However, when I took the screenshots, they were ineffective and left blank

Expected Behavior

Can effectively capture screenshots of webview content

Steps with code example to reproduce

Steps with code example to reproduce

class TestScreenShot extends StatefulWidget {
  const TestScreenShot({super.key});

  @override
  State<TestScreenShot> createState() => _TestScreenShotState();
}

class _TestScreenShotState extends State<TestScreenShot> {
  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          TextButton(
              onPressed: () {
                webViewController?.takeScreenshot().then((screenshot) async {
                  if (screenshot == null || webViewController == null) {
                    print('data is empty');
                    return;
                  }
                  Directory tempDir = await getTemporaryDirectory();
                  File file = File('${tempDir.path}/screenshot.png');
                  print('path ' + file.path);
                  await file.writeAsBytes(screenshot);
                  showDialog(
                      context: context,
                      builder: (context) {
                        return AlertDialog(
                          content: Image.memory(screenshot),
                        );
                      });
                });
              },
              child: Text('screenShot')),
        ],
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(
          url: WebUri("https://processing-30afc.web.app/p5Preview"),
        ),
        onProgressChanged: (InAppWebViewController controller, int progress) {
          if (progress == 100) {
            webViewController = controller;
          }
        },
      ),
    );
  }
}

Stacktrace/Logs

Did I save the image locally while running the screenshot? It was successful
path /data/user/0/com.code.art.show.processing/cache/screenshot.png

Flutter version

3.24.3

Operating System, Device-specific and/or Tool

android,ios,xcode

Plugin version

6.1.5

Additional information

No response

Self grab

• I'm ready to work on this issue!

[pichillilorenzo]

iOS is working for me. Instead, Android won't work with HTML canvas objects unfortunately.
On Android, you can try to use the controller.evaluateJavascript method and get the image data of the canvas using https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL javascript API.

[peter100u]

Is it possible to use native APIs to take screenshots of your webview instead of finding ways to use JavaScript related APIs

[pichillilorenzo]

As I said, Android won't work with HTML canvas objects.
I have tried but didn’t found any solution for it.
Android WebView native APIs works but except for canvas elements that remains white.
This is has something to do with the API itself or how the platform manages it.
If you have or find any native solution for it, you are welcome! 👍