react-native-view-shot icon indicating copy to clipboard operation
react-native-view-shot copied to clipboard

Published 20 hours ago • verified publisher icon gre

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

Open Rishabh-Streak opened this issue 4 years ago • 13 comments

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

Rishabh-Streak avatar Aug 13 '20 07:08 Rishabh-Streak

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

gre avatar Aug 14 '20 05:08 gre

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

Wecorpservicesgit avatar Aug 26 '20 09:08 Wecorpservicesgit

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

gabrielluka avatar Sep 10 '20 21:09 gabrielluka

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

iOS screenshot_ios

QlikBDA avatar Sep 17 '20 14:09 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.

QlikBDA avatar Sep 17 '20 19:09 QlikBDA

hello, any updates?

SmirnovM91 avatar Sep 05 '21 07:09 SmirnovM91

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.

JeremyBradshaw7 avatar May 31 '22 20:05 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.

Same here

tiamed avatar Jun 13 '22 10:06 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?

wunai-max avatar Jul 07 '23 02:07 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?

No, I use injected script instead.

tiamed avatar Jul 10 '23 03:07 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?

salman-ar-sar avatar Sep 07 '23 06:09 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?

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

tiamed avatar Sep 09 '23 19:09 tiamed