getImageSize (image) {
if (!image) {
return;
}
const { source, dimensions } = image;
if (dimensions) {
this.setState({ imageDimensions: dimensions });
return;
}
if (source && source.uri) {
Image.getSize(
source.uri,
(width, height) => {
if (width && height) {
if (this.state.imageDimensions && this.state.imageDimensions.width === width && this.state.imageDimensions.height === height) {
// no need to update state
} else {
this._mounted && this.setState({ imageDimensions: { width, height } });
}
}
},
() => {
this._mounted && this.setState({ error: true });
}
);
} else {
console.warn('react-native-image-gallery', 'Please provide dimensions of your local images');
}
}
componentWillReceiveProps(nextProps){
this.setState({ image: null });
if(!nextProps.info.preview || !nextProps.info.preview.image){
return;
}
const imageUri = nextProps.info.preview.image.uri;
const containerWidth = this.state.width;
if(!containerWidth && imageUri){
Image.getSize(imageUri, (width, height) => {
this.setState({
image: {
uri: imageUri,
height: height,
width: width
}
});
});
}
if(containerWidth && imageUri){
Image.getSize(imageUri, (width, height) => {
this.setState({
height: containerWidth * height / width,
image: {
uri: imageUri,
height: height,
width: width
}
});
});
}
}
componentWillMount() {
const { entityCardId, card } = this.props;
const { id, tmpId, uri, url, dimensions } = card;
const color = card.tmp.color || card.color;
const opacity = card.tmp.opacity || card.opacity;
const isCover = entityCardId === id || entityCardId === tmpId;
if (!!dimensions.height && !!dimensions.width) {
// $FlowFixMe ~> dimensions
this.setState({ dimensions, color, opacity, isCover });
} else {
Image.getSize(uri || url, (width, height) => {
if (this.mounted) {
this.setState({ dimensions: { width, height }, color, opacity, isCover });
}
});
}
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onStartShouldSetPanResponderCapture: () => true,
// onStartShouldSetPanResponder: evt => this.handleStartShouldSetPanResponder(evt),
// onStartShouldSetPanResponderCapture: evt => this.handleStartShouldSetPanResponder(evt),
// onMoveShouldSetPanResponder: () => true,
// onMoveShouldSetPanResponderCapture: () => true,
// onPanResponderMove: (evt, gs) => this.handlePanResponderMove(evt, gs),
onPanResponderRelease: (evt, gs) => this.handlePanResponderRelease(gs),
// onPanResponderTerminationRequest: () => false,
});
}
getImageSize (props = this.props) {
const { source, imagesMaxWidth, style, height, width } = props;
const { styleWidth, styleHeight } = this.getDimensionsFromStyle(style, height, width);
if (styleWidth && styleHeight) {
return this.setState({
width: typeof styleWidth === 'string' && styleWidth.search('%') !== -1 ? styleWidth : parseInt(styleWidth, 10),
height: typeof styleHeight === 'string' && styleHeight.search('%') !== -1 ? styleHeight : parseInt(styleHeight, 10)
});
}
// Fetch image dimensions only if they aren't supplied or if with or height is missing
Image.getSize(
source.uri,
(originalWidth, originalHeight) => {
if (!imagesMaxWidth) {
return this.setState({ width: originalWidth, height: originalHeight });
}
const optimalWidth = imagesMaxWidth <= originalWidth ? imagesMaxWidth : originalWidth;
const optimalHeight = (optimalWidth * originalHeight) / originalWidth;
this.setState({ width: optimalWidth, height: optimalHeight, error: false });
},
() => {
this.setState({ error: true });
}
);
}
.then((res) => {
res.data = JSON.parse(res.data);
console.log(res);
Image.getSize(this.source, (width, height) => {
console.log("GottenImage...");
const densityWidth = width * 1.0 / Dimensions.get('window').width;
const densityHeight = height * 1.0 / Dimensions.get('window').height;
let bounds = [];
res.data.forEach(function(ele) {
let bound = {
width: ele.faceRectangle.width / densityWidth,
height: ele.faceRectangle.height / densityHeight,
top: ele.faceRectangle.top / densityHeight,
left: ele.faceRectangle.left / densityWidth,
score: '',
};
let maxi = -1;
for(let key in ele.scores) {
if(ele.scores[key] > maxi) {
maxi = ele.scores[key];
bound.score = key;
}
}
console.log(bound);
bounds.push(bound);
}, this);
console.log("Final result");
console.log(bounds);
this.setState({bounds});
}, err => console.warn(err))
})
componentDidMount() {
//avoid repaint if width/height is given
if (this.props.style.width || this.props.style.height) {
return;
}
Image.getSize(this.props.source.uri, (w, h) => {
this.setState({width: w, height: h});
});
}
componentDidMount () {
const { source, imagesMaxWidth } = this.props;
Image.getSize(source.uri, (width, height) => {
this.setState({
width: imagesMaxWidth && width > imagesMaxWidth ? imagesMaxWidth : width,
height: imagesMaxWidth && width > imagesMaxWidth ? height / (width / imagesMaxWidth) : height
});
});
}
componentDidMount() {
if (this.props.style.width || this.props.style.height) {
return;
}
Image.getSize(this.props.source.uri, (w, h) => {
console.log(`Image[${this.props.source.uri}]: width:`, w, 'height:', h);
this.setState({ width: w, height: h });
}, error => {
console.log('Error while getting size of image:', error);
});
}
storeImages(data) {
const assets = data.edges;
const images = assets.map((asset) => asset.node.image);
const widths = [];
const selected = [];
for (var i = 0; i < images.length; i++) {
if (i == images.length - 1) {
Image.getSize(images[i].uri, (w, h) => {
widths.push((w/h)*130);
selected.push(false);
this.setState({images,widths,selected});
})
}else{
Image.getSize(images[i].uri, (w, h) => {
widths.push((w/h)*130);
selected.push(false);
})
}
}
}
constructor(props) {
super(props);
this.state = {
width: null,
height: null,
};
this.imageSizeLoaded = this.imageSizeLoaded.bind(this);
RNImage.getSize(props.source.uri, this.imageSizeLoaded, this.imageSizeLoadFailed);
}
componentWillMount: function() {
logger.custom('View Loaded: News Detail');
if (this.props.route.topStoriesData.image_lg) {
Image.getSize(this.props.route.topStoriesData.image_lg, (width, height) => {
this.setState({
newsImgWidth: windowWidth,
newsImgHeight: height * (windowWidth / width)
});
});
}
},
componentDidMount() {
Image.getSize('https://d26p6gt0m19hor.cloudfront.net/assets/donations/home/grid/give-monthly-ac4abafab17cd6b74196227a89e29ecc1f9a6d53c4690dff13556c0352e79112.jpg', (returnWidth, returnHeight) => {
// calculate image width and height
console.log(returnWidth);
console.log(returnHeight)
console.log(height);
console.log(width);
const screenWidth = width;
const scaleFactor = returnWidth / screenWidth
const imageHeight = returnHeight / scaleFactor
this.setState({imgWidth: screenWidth, imgHeight: imageHeight})
})
}
componentDidMount(){
if(Platform.OS === "ios"){
Image.getSize(this.props.source.uri,(w,h)=>{
this.setState({
width:w,height:h
})
})
}else{
this.setState({
width:200,
height:200
})
}
}
componentDidMount() {
Image.getSize('http://www.cocokelley.com/wp-content/uploads/2017/06/the-candy-colored-streets-in-Tallin-Estonia-visual-travel-diary-on-coco-kelley.4.jpg', (returnWidth, returnHeight) => {
// calculate image width and height
console.log(returnWidth);
console.log(returnHeight)
console.log(height);
console.log(width);
const screenWidth = width * 0.85;
const scaleFactor = returnWidth / screenWidth
const imageHeight = returnHeight / scaleFactor
this.setState({imgWidth: screenWidth, imgHeight: imageHeight})
})
}
_onImageLoadEnd(uri, imageId) {
const {maxImageWidth} = this.props;
Image.getSize && Image.getSize(uri, (w, h)=> {
if (w >= maxImageWidth) {
h = (maxImageWidth / w) * h;
w = maxImageWidth;
}
this._images[imageId] && this._images[imageId].setNativeProps({
style: {
width: w,
height: h
}
});
});
}
_onLayout(event) {
const containerWidth = event.nativeEvent.layout.width;
if (this.props.ratio) {
this.setState({
width: containerWidth,
height: containerWidth * this.props.ratio
});
} else {
Image.getSize(this.props.post.post_url, (width, height) => {
this.setState({
width: containerWidth,
height: containerWidth * height / width
});
});
}
}
fetch() {
var { style } = this.props;
if(style.width && style.height) {
this.setState({
width: style.width,
height: style.height,
loaded: true
});
} else {
Image.getSize(this.props.source.uri, (width, height) => {
this.setState({
width: width / ratio,
height: height / ratio,
loaded: true
});
});
}
}
return async (dispatch) => {
dispatch({
type: ActionTypes.START_ADDING_HATS,
payload: null,
});
Actions.photoPreview();
try {
// Detect faces
const result = await FaceDetector.addHats(path);
if (result === 'Error') {
throw new Error('Error detection Faces!');
}
// Get image size
Image.getSize(result, (width, height) => {
dispatch({
type: ActionTypes.ADDING_HATS_SUCCESS,
payload: {
height,
width,
path,
},
});
}, (err) => {
console.log(err);
dispatch({
type: ActionTypes.ADDING_HATS_ERROR,
payload: null,
});
});
} catch (e) {
console.log(e.message);
dispatch({
type: ActionTypes.ADDING_HATS_ERROR,
payload: null,
});
}
}
onImageLoadEnd(){
const { uri, maxWidth = defaultMaxWidth } = this.props;
this.setState({
loading: false
});
Image.getSize && Image.getSize(uri, (width, height)=> {
if (width >= maxWidth) {
height = (maxWidth / width) * height;
width = maxWidth;
}
this.image && this.image.setNativeProps({
style: {
width: width,
height: height
}
});
},() => null);
}
return new Promise((resolve, reject) => {
Image.getSize(
src,
(width, height) => {
res.width = width
res.height = height
res.path = src
res.orientation = null
res.type = null
success && success(res)
complete && complete(res)
resolve(res)
},
(err) => {
res.errMsg = err.message
fail && fail(res)
complete && complete(res)
reject(res)
}
)
})
componentWillMount(){
var zoom = (100 - this.props.zoom)/100;
this.setState({ zoom: zoom })
this._panOffsetX= 0;
this._panOffsetY= 0;
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderTerminationRequest: (evt, gestureState) => true,
onShouldBlockNativeResponder: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
//move variables
this.offsetX = this.state.centerX;
this.offsetY = this.state.centerY;
//zoom variables
this.zoomLastDistance=0;
this.zoomCurrentDistance=0;
},
onPanResponderMove: (evt, gestureState) => {
//We are moving the image
if (evt.nativeEvent.changedTouches.length <= 1){
if (this.props.panToMove){
var trackX = (gestureState.dx/this.props.cropWidth)*this.state.zoom;
var trackY = (gestureState.dy/this.props.cropHeight)*this.state.zoom;
var newPosX = (Number(this.offsetX) - Number(trackX));
var newPosY = (Number(this.offsetY) - Number(trackY));
if (newPosX> 1) newPosX = Number(1);
if (newPosY> 1) newPosY = Number(1);
if (newPosX< 0) newPosX = Number(0);
if (newPosY< 0) newPosY = Number(0);
this.setState({centerX: newPosX})
this.setState({centerY: newPosY})
this._panOffsetX = gestureState.dx*this.state.zoom;
this._panOffsetY = gestureState.dy*this.state.zoom;
}
}else{
//We are zooming the image
if (this.props.pinchToZoom){
//Pinch activated
if (this.zoomLastDistance == 0){
let a = evt.nativeEvent.changedTouches[0].locationX - evt.nativeEvent.changedTouches[1].locationX
let b = evt.nativeEvent.changedTouches[0].locationY - evt.nativeEvent.changedTouches[1].locationY
let c = Math.sqrt( a*a + b*b );
this.zoomLastDistance = c.toFixed(1);
}else{
let a = evt.nativeEvent.changedTouches[0].locationX - evt.nativeEvent.changedTouches[1].locationX
let b = evt.nativeEvent.changedTouches[0].locationY - evt.nativeEvent.changedTouches[1].locationY
let c = Math.sqrt( a*a + b*b );
this.zoomCurrentDistance = c.toFixed(1);
//what is the zoom level
var screenDiagonal = Math.sqrt(this.state.imageHeight*this.state.imageHeight + this.state.imageWidth*this.state.imageWidth);
var distance = (this.zoomCurrentDistance-this.zoomLastDistance)/400;
var zoom = this.state.zoom-distance;
if (zoom<0.3)zoom=0.3;
if (zoom>1)zoom=1;
this.setState({
zoom: zoom,
})
//Set last distance..
this.zoomLastDistance=this.zoomCurrentDistance;
}
}
}
},
});
Image.getSize(this.props.image, (width, height) => {
this.setState({
imageHeight: height,
imageWidth: width,
});
});
}
images.map((image, index) => {
Image.getSize(image, (width, height) => {
this.state.imageHeight[index] = imageWidth * height / width;
this.setState({'imageHeight': this.state.imageHeight});
});
})
_handlePress = () => {
Image.getSize(this.props.source.uri, (width, height) => {
this.setState({ startLoad: true, showButton: false, width, height });
});
};