question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

very long image, ViewShot capture a blank image

See original GitHub issue

bug report

I want to capture a 9292 pixel height view, finally it is a blank. But if i change my code from 9292 to 4646. ViewShot works right. And this is on the mobile phone , the simulator works but the captured image is blurry. The origin image is 9292 pixel height , 750 pixel width.

Version

IOS 10 “react”: “16.0.0-alpha.12”, “react-native”: “0.48.4”, “react-native-view-shot”: “2.4.0”,

Platform: iOS , iPhone 6/6s/SE/X

Expected behavior

QQ20191011-172708@2x

Actual behavior

IMG_0313

Steps to reproduce the behavior

import React, { PureComponent } from "react";
import { View, StyleSheet, Image, PixelRatio } from "react-native";
import ViewShot from "react-native-view-shot";
const pxRatio = PixelRatio.get();

class Preview extends PureComponent {
  state={
    baseImageURL: 'http://clickeggsdev-10081362.file.myqcloud.com/1565861000245-ae3fe03d987243485026191875de8137/%E7%BA%BF%E4%B8%8A%E5%88%86%E5%8F%91%E5%9B%BE%E7%89%87-e47bb1a0-bf3e-11e9-a9c5-43eb9d096463.jpg'
  }
  render() {
    <ViewShot
      ref={ref => (this.ViewShot = ref)}
      options={{
        format: "jpg",
        quality: 1,
        result: "tmpfile"
      }}
    >
      <View style={styles.image}>
        <Image
          source={{ uri: baseImageURL }}
          style={[styles.image, { height: 9292 / pxRatio }]}
          onLoad={this.onBaseImageLoaded}
          onError={this.onImageLoadFailed}
        />
        {this.renderQRCode()}
      </View>
    </ViewShot>;
  }

  onBaseImageLoaded() {
    setTimeout(() => {
      this.ViewShot.capture().then(uri => {
        this.setState({ compositeImageURI: uri }, () => {});
      });
    }, 1000);
  }
}

const styles = StyleSheet.create({
  image: {
    width: 750 / pxRatio
  }
});

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:7
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
xiezzzcommented, Jul 28, 2022

在options中加入“useRenderInContext”,就可以了,试试看; options={{ 格式:‘jpg’, 质量:1, 宽度:deviceWidth, 高度:this.state.webViewHeight, useRenderInContext:true }}

TypeScript: useRenderincontext does not exist in CaptureOptions

0reactions
471595249commented, Jul 27, 2022

Add “useRenderInContext” In options, it works, try it; options={{ format: ‘jpg’, quality: 1, width: deviceWidth, height: this.state.webViewHeight, useRenderInContext: true }}

Read more comments on GitHub >

github_iconTop Results From Across the Web

React native view shot can't receive empty message
I want to export the image using React Native View Shot, but there is a problem, how come the image doesn't want to...
Read more >
captureRef - Expo Documentation
Given a view, captureRef will essentially screenshot that view and return an image for you. This is very useful for things like signature...
Read more >
react-native-view-shot - npm
Capture a React Native view to an image. Latest version: 3.5.0, last published: 2 months ago. Start using react-native-view-shot in your ...
Read more >
react-native-view-shot - Bountysource
can not capture ImageBackground in screen shot when viewshot includes an ... Getting blank image on android, iOS works well , Below is...
Read more >
Blank Image When Sharing Snagit Capture to Outlook
For more information on setting and adjusting Group Policy settings within Outlook 2013, see this article. Tip: Configure Microsoft Policy. We ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found