very long image, ViewShot capture a blank image
See original GitHub issuebug 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
Actual behavior
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:
- Created 4 years ago
- Reactions:7
- Comments:5 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
TypeScript: useRenderincontext does not exist in CaptureOptions
Add “useRenderInContext” In options, it works, try it; options={{ format: ‘jpg’, quality: 1, width: deviceWidth, height: this.state.webViewHeight, useRenderInContext: true }}