WebView charts captures blank

Manweill commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

gre commented 7 years ago

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 https://github.com/gre/react-native-view-shot/issues/48 so you don't have to think about this problem. What do you think?

Manweill commented 7 years ago

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

Manweill commented 7 years ago

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

gre commented 7 years ago

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

Rice-M commented 6 years ago

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

gre commented 6 years ago

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

Rice-M commented 6 years ago

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

Rice-M commented 6 years ago

wechatimg120

wechatimg121 You can see the img1 some section is blank

ghost commented 6 years ago

solved？

csfwff commented 5 years ago

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

Grom-S commented 5 years ago

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?

leonsimple commented 3 years ago

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

salman-ar-sar commented 1 year ago

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.

gre / react-native-view-shot

WebView charts captures blank #53