Cannot take screenshot for platform-views by using RepaintBoundary?

[zhaoya188]

Steps to Reproduce

1. run demo from webview_flutter
2. take screenshot by using RepaintBoundary.
3. get image:
   

flutter analyze

Analyzing flutter_app...
No issues found! (ran in 1.9s)

flutter doctor -v

[✓] Flutter (Channel beta, v1.0.0, on Mac OS X 10.13.6 17G3025, locale zh-Hans-CN)
    • Flutter version 1.0.0 at /Users/zhaoya/zy/dev/flutter
    • Framework revision 5391447fae (13 days ago), 2018-11-29 19:41:26 -0800
    • Engine revision 7375a0f414
    • Dart version 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    • Android SDK at /Users/zhaoya/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)
    • All Android licenses accepted.

[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    ✗ ideviceinstaller is not installed; this is used to discover connected iOS devices.
      To install with Brew, run:
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    • ios-deploy 1.9.4
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 29.0.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[!] IntelliJ IDEA Community Edition (version 2016.2.5)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • For information about installing plugins, see
      https://flutter.io/intellij-setup/#installing-the-plugins
    ✗ This install is older than the minimum recommended version of 2017.1.0.

[✓] Connected device (1 available)
    • Robin • NBQGLMB612601533 • android-arm64 • Android 7.1.1 (API 25)

[goderbauer]

cc @amirh

[SeanningTatum]

Is there any progress on this? I'm also experiencing the same issue.

[amirh]

@SeanningTatum I suggest you thumb up the issue if it affects you as well so it comes up when prioritizing.

[SeanningTatum]

@amirh I think you should add the platform-ios tag too, I experienced this in iOS.

[amirh]

@SeanningTatum on iOS it's a different issue (it wasn't implemented yet) the tracking issue for that is #23435

[juliengit2]

same issue for us and very annoying, any progress ?

[darshankawar]

May be related to 33568

[darshankawar]

Issue is reproducible on latest dev channel (1.20.0-0.0.pre) and with latest version of webview_flutter.

flutter doctor -v

[✓] Flutter (Channel dev, 1.20.0-0.0.pre, on Mac OS X 10.15.2 19C57, locale en-US)
    • Flutter version 1.20.0-0.0.pre at /Users/deeptibelsare/Documents/Fluttersdk/flutter
    • Framework revision d9653445f4 (8 days ago), 2020-06-09 18:43:03 -0400
    • Engine revision e8c13aa012
    • Dart version 2.9.0 (build 2.9.0-14.0.dev 5c1376615e)

 
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/deeptibelsare/Library/Android/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/deeptibelsare/Library/Android/sdk
    • ANDROID_SDK_ROOT = /Users/deeptibelsare/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    ✗ Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions.

 
[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3, Build version 11C29
    • CocoaPods version 1.9.3

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] Connected device (1 available)
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 8.1.0 (API 27) (emulator)

! Doctor found issues in 1 category.

code sample

import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

import 'package:webview_flutter/webview_flutter.dart';
import 'package:gallery_saver/gallery_saver.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static GlobalKey previewContainer = new GlobalKey();

  @override
  Widget build(BuildContext context) {

    return RepaintBoundary(
        key: previewContainer,
        child: new Scaffold(
          appBar: new AppBar(

            title: new Text(widget.title),
          ),
          body: new Center(
            child: WebView(
              initialUrl: 'https://google.com',
            ),
          ),
          floatingActionButton: new FloatingActionButton(
            onPressed: takeScreenShot,
            tooltip: 'Increment',
            child: new Icon(Icons.add),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        )
    );
  }
  Future<void> takeScreenShot() async {
    return Future.delayed(const Duration(milliseconds: 20), () async {
      RenderRepaintBoundary boundary = previewContainer.currentContext.findRenderObject();
      ui.Image image = await boundary.toImage();
      final directory = (await getApplicationDocumentsDirectory()).path;
      ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
      Uint8List pngBytes = byteData.buffer.asUint8List();
      print(pngBytes);
      File imgFile =new File('$directory/screenshot.png');
      GallerySaver.saveImage('$directory/screenshot.png');
      imgFile.writeAsBytes(pngBytes);
    });
  }
}

[yukitaka13-1110]

Any progress?

[matuella]

Well, I know this may be a controversial suggestion, but the flutter_inappwebview is an alternative plugin which currently support taking screenshots (takeScreenshot function). While this isn't prioritized, it may be reasonable to use this alternative plugin if this functionality is essential for your application (like it was for me).

[Sunbreak]

Update: webview_flutter 1.0.x with Hybrid-Composition enabled reproduces as well

[wanjm]

in fact, it is " Cannot take screenshot for PlatformView by using RepaintBoundary"
webview_flutter using PlatformView

[wanjm]

IOS also has such problem instead of just Android platform;

[xiaouhu]

have any progress?

[yukitaka13-1110]

Any progress?

[mrmodh10]

Well, I know this may be a controversial suggestion, but the flutter_inappwebview is an alternative plugin which currently support taking screenshots (takeScreenshot function). While this isn't prioritized, it may be reasonable to use this alternative plugin if this functionality is essential for your application (like it was for me).

yes i know it is alternative plugin but using that plugin i can not take screenshot of current state, for example in webview i am drawing something and then i want to take screenshot with drawing ,which is not happening using [flutter_inappwebview].

[delay]

Could you expose this feature from the WkWebview api on iOS. It has takeSnapshot and createPDF options.
https://developer.apple.com/documentation/webkit/wkwebview

[dayron9110]

News? is there any way to take screenshots of webview content?

[delay]

The only way that I think this might work is to create a javascript channel and insert something like this. https://html2canvas.hertzen.com/ I haven't tested this yet but its the only idea I have to get around this problem until flutter adds it to the webview.

[blasten]

This is a limitation of platform views at the moment. The current workaround on Android is to use the Espresso framework. I don't have an example I can share at the moment, but internal teams at Google have done this successfully when using hybrid composition.

[s20797]

Is there any progress on this? I'm also experiencing the same issue.

[s20797]

Any progress?

same problem use in apple_map_flutter

[s20797]

any way for apple_map_flutter

[blasten]

The Flutter team will be working on this feature this quarter. You can follow progress on #83856.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.