pichillilorenzo / flutter_inappwebview

A Flutter plugin that allows you to add an inline webview, to use a headless webview, and to open an in-app browser window.
https://inappwebview.dev
Apache License 2.0
3.26k stars 1.61k forks source link

The takeScreenshot API did not achieve its intended effect #2365

Open peter100u opened 1 day ago

peter100u commented 1 day ago

Is there an existing issue for this?

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 ```dart class TestScreenShot extends StatefulWidget { const TestScreenShot({super.key}); @override State createState() => _TestScreenShotState(); } class _TestScreenShotState extends State { 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

pichillilorenzo commented 8 hours ago

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 commented 2 minutes ago

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