Unable To take a screenshot of a website's graph (Canvas) loaded inside Web view in React native

[Rishabh-Streak]

bug report

Unable To take a screenshot of a website's graph (Canvas) loaded inside Webview in React native

Version & Platform

"react-native-view-shot": "^3.1.2" "react-native": "0.61.5"

Platform: Android

Expected behavior

As the library supports web view screenshot. It was expected that it will be able to take a screenshot of a website chart inside a web view.

Actual behavior

There was no chart (canvas ) in the screenshot image generated.

Steps to reproduce the behavior

[gre]

Are you sure you wait long enough before the screenshot? The web page might takes time to render the graph 🤔

[Wecorpservicesgit]

There is the same problem with Google Earth and any video player in webview, the terrain model/video are just blank in screenshots.

[gabrielluka]

I have the same problem using RNMapboxGL, does anyone have any idea what it is?

[QlikBDA]

@gre I'm seeing the same thing, compare android with iOS: Android

iOS

[QlikBDA]

Setting androidHardwareAccelerationDisabled={true} on the WebView fixed it for me, not sure if it is a good solution though. EDIT: this cause serious performance issues (not a surprise) so it is not a viable workaround in my context.

[SmirnovM91]

hello, any updates?

[JeremyBradshaw7]

Same issue here, trying to capture chart.js charts (rendered in a canvas tag) on Android and it doesn't work, on iOS it's fine though. Have tried androidHardwareAccelerationDisabled, and capturing the View container not the WebView directly, but no joy.

[tiamed]

Same issue here, trying to capture chart.js charts (rendered in a canvas tag) on Android and it doesn't work, on iOS it's fine though. Have tried androidHardwareAccelerationDisabled, and capturing the View container not the WebView directly, but no joy.

Same here

[wunai-max]

Same issue here, trying to capture chart.js charts (rendered in a canvas tag) on Android and it doesn't work, on iOS it's fine though. Have tried androidHardwareAccelerationDisabled, and capturing the View container not the WebView directly, but no joy.

Has the problem been solved?

[tiamed]

Same issue here, trying to capture chart.js charts (rendered in a canvas tag) on Android and it doesn't work, on iOS it's fine though. Have tried androidHardwareAccelerationDisabled, and capturing the View container not the WebView directly, but no joy.

Has the problem been solved?

No, I use injected script instead.

[salman-ar-sar]

Same issue here, trying to capture chart.js charts (rendered in a canvas tag) on Android and it doesn't work, on iOS it's fine though. Have tried androidHardwareAccelerationDisabled, and capturing the View container not the WebView directly, but no joy.

Has the problem been solved?

No, I use injected script instead.

Can you share how you did that?

[tiamed]

Same issue here, trying to capture chart.js charts (rendered in a canvas tag) on Android and it doesn't work, on iOS it's fine though. Have tried androidHardwareAccelerationDisabled, and capturing the View container not the WebView directly, but no joy.

Has the problem been solved?

No, I use injected script instead.

Can you share how you did that?

https://github.com/tiamed/bog-nimingban/blob/57aa63e90a1800984caa1658ed866e98001bdf85/screens/SketchScreen.tsx#L24

[shedworth]

If you can access WebView's toDataURL method (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL), which returns a base64-encoded representation of the image, you can skip View Shot altogether.

I faced a similar problem using react-native-canvas and the solution was:

...
    // calling this returns a uri to a locally-stored png of the canvas
    const captureCanvas = async (): Promise<string | undefined> => {
      if (!canvasRef.current) {
        return;
      }

      const dataURL = await canvasRef.current.toDataURL();
      // Remove the data URL scheme ("data:image/png;base64,")
      const base64Image = dataURL.split(",")[1];
      if (!base64Image) {
        return;
      }

      const destinationFilepath = getTempFilePath("png"); // implement your own helper fn here
      await FileSystem.writeAsStringAsync(destinationFilepath, base64Image, {
        encoding: "base64",
      });
      return destinationFilepath;
    };

    return (
        <View style={styles.container}>
          <Canvas ref={canvasRef} />
        <View>
    );