Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WebView charts captures blank #53

Closed
Manweill opened this issue Mar 31, 2017 · 16 comments
Closed

WebView charts captures blank #53

Manweill opened this issue Mar 31, 2017 · 16 comments
Assignees
@gre

Comments

@Manweill
Copy link
Contributor

Manweill commented Mar 31, 2017 •
edited

webview source require this html,captures blank, in the react-native-view-shot-example project @gre

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <!-- 引入 echarts.js -->
  <script src="http://cdn.bootcss.com/echarts/3.4.0/echarts.min.js"></script>
</head>

<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var symbolSize = 20;
    var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
    var points = [];

    option = {
      title: {
        text: 'Click to Add Points'
      },
      tooltip: {
        formatter: function (params) {
          var data = params.data || [0, 0];
          return data[0].toFixed(2) + ', ' + data[1].toFixed(2);
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        min: -60,
        max: 20,
        type: 'value',
        axisLine: { onZero: false }
      },
      yAxis: {
        min: 0,
        max: 40,
        type: 'value',
        axisLine: { onZero: false }
      },
      series: [
        {
          id: 'a',
          type: 'line',
          smooth: true,
          symbolSize: symbolSize,
          data: data
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>
@Manweill
Copy link
Contributor Author

but, if move the webview element after <View ref="form"></View> , is not blank.
like this:

       <View
          ref="form"
          style={styles.form}>
          <View style={styles.btns}>
            <Btn label="😻 Reset" onPress={() => this.setState({ previewSource: catsSource })} />
            <Btn label="📷 Head Section" onPress={this.snapshot("header")} />
            <Btn label="📷 Form" onPress={this.snapshot("form")} />
            <Btn label="📷 Experimental Section" onPress={this.snapshot("complex")} />
            <Btn label="📷 All (ScrollView)" onPress={this.snapshot("full")} />
            <Btn label="📷 GL React" onPress={this.snapshot("gl")} />
            <Btn label="📷 MapView" onPress={this.snapshot("mapview")} />
            <Btn label="📷 WebView" onPress={this.snapshot("webview")} />
            <Btn label="📷 Video" onPress={this.snapshot("video")} />
            <Btn label="📷 Empty View (should crash)" onPress={this.snapshot("empty")} />
          </View>

          <View
            ref="webview"
            collapsable={false}
            style={{ width: 300, height: 500 }}>
            <WebView
              source={require('./assets/cavans.html')}
            />
          </View>

@oakis
Copy link

oakis commented Mar 31, 2017

What platform are you developing on?

This is what it says in the docs:

Android WebView:
Only supported by wrapping a parent and snapshotting it.

@Manweill
Copy link
Contributor Author

Manweill commented Mar 31, 2017 •
edited

is Android WebView. and, I thinks you don't mean what i say .
the WebView snapshot is work ,but the canvas is blank.

@gre
Copy link
Owner

gre commented Mar 31, 2017 •
edited

as said in the README here https://github.com/gre/react-native-view-shot#interoperability-table

Android WebView is only supported by wrapping a <View collapsable={false}> parent and snapshotting it.

for some reason, directly attempting to snapshot the WebView won't work. to avoid this confusion, I might introduce that #48 so you don't have to think about this problem. What do you think?

@Manweill
Copy link
Contributor Author

@gre yes ,is in . maybe i expressions has worng. i will fork react-native-view-shot-example and code the problem

@Manweill
Copy link
Contributor Author

Manweill commented Apr 5, 2017 •
edited

@gre see in https://github.com/manweill/react-native-view-shot-example

@gre gre self-assigned this Apr 5, 2017
@gre
Copy link
Owner

gre commented Aug 25, 2017

I've tested your code in a WebView and I can successfully snapshot in Android so maybe this was recently fixed

screen shot 2017-08-25 at 22 15 40

@gre gre closed this as completed Aug 25, 2017
@Rice-M
Copy link

Rice-M commented Dec 11, 2017

@Manweill Hi, how did you solve this, in my case some canvas in webview can not be captured

@gre
Copy link
Owner

gre commented Dec 11, 2017

are you sure the canvas is rendered at the time you capture it?

@Rice-M
Copy link

Rice-M commented Dec 13, 2017

@gre yes, I can see the rendered canvas in the srceen, bug when capture to img some canvas not shown

@Rice-M
Copy link

Rice-M commented Dec 13, 2017

wechatimg120

wechatimg121
You can see the img1 some section is blank

@ghost
Copy link

ghost commented Mar 26, 2018

solved？

@csfwff
Copy link

csfwff commented Dec 21, 2018

try to set android:hardwareAccelerated="false", it works.

@tomLadder tomLadder mentioned this issue Jul 1, 2019
Closed
@Grom-S
Copy link

Grom-S commented Jul 4, 2019

I a have the same problem. Canvas in webview is blank. Setting android:hardwareAccelerated="false" works, but then you don't get the acceleration and the app is slow.
Is there any other way to solve this issue? @Rice-M how did you solved it?

@Lunziyuan Lunziyuan mentioned this issue Sep 1, 2020
Closed
@leonsimple
Copy link

hint https://developer.android.com/reference/android/view/PixelCopy

@salman-ar-sar
Copy link

Did anyone find a solution for this without setting android:hardwareAccelerated="false"? That is not a real solution right?

I am facing this issue on Android only when capturing a view containing TradingView in a WebView.

@gre Please let me know if I am missing anything.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@gre gre

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@gre @Grom-S @oakis @Rice-M @Manweill @csfwff @salman-ar-sar @leonsimple