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 } }); }); } }
function prefetchSpecialEventsImages(specialEvents) { if (specialEvents.logo) { Image.prefetch(specialEvents.logo) } if (specialEvents['logo-sm']) { Image.prefetch(specialEvents['logo-sm']) } if (specialEvents.map) { Image.prefetch(specialEvents.map) } }
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, }); }
links.forEach((item) => { const imageUrl = item.icon // Check if actually a url and not icon name if (imageUrl.indexOf('fontawesome:') !== 0) { Image.prefetch(imageUrl) } })
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 }); } ); }
onLoad = (event: Object) => { const { src, onLoad } = this.props const { width, height } = Image.resolveAssetSource(typeof src === 'string' && /^(https?:)?\/\//.test(src) ? { uri: src } : src) onLoad && onLoad({ detail: { width, height } }) }
.then(response => { if(response.errorMessage) { console.error('BreweryDB API Limit Reached. Sorry :-(') dispatch(loadBeersFailure('BreweryDB API Limit Reached. Sorry :-(')); return; } let beerArr = []; for(var key in response){ if(!beerArr.length < 2){ Image.prefetch(response[key].label).then(() => { // console.log('IMAGE PREFETCHED for ', response[key].name) }) } beerArr.push({ id: key, name: response[key].name, label: response[key].label, style: response[key].style, icon: response[key].icon, descript: response[key].descript, abv: response[key].abv, brewery: response[key].brewery, website: response[key].website }) } dispatch(loadBeersSuccess(beerArr)); })
.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 { uri } = this.props; const url = ImageUtilities.handleAvatarImageURI(uri); Image.prefetch(url).then(() => { this.setState({ isLoaded: true, url }); }, () => { console.log('cannot load avatar image:', url); }); }
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 }); }); }
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); }
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); }) } } }
.then(response => { // console.log('response in wishlist actions: '); // console.log(response); for(var beer in response) { Image.prefetch(response[beer].icon) //console.log(response[beer].icon); } dispatch(loadWishlistSuccess(response)); Actions.wishlist(); })
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) }); }); } },
_handlePress = () => { this._startTime = this._startTime || Date.now(); Image.prefetch(createUncachedURI(this.props.source.uri)).then( () => { this._loadEventFired('✔ Prefetch OK'); this.setState(() => ({ startLoad: true })); }, error => { this._loadEventFired(`✘ Prefetch failed (+${Date.now() - this._startTime}ms)`); console.log(error); } ); };
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}) }) }
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 }) } }
_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) } ) })
render() { const { props } = this; const { preserveAspectRatio, x, y, width, height, href } = props; const modes = preserveAspectRatio.trim().split(spacesRegExp); const meetOrSlice = meetOrSliceTypes[modes[1]] || 0; const align = alignEnum[modes[0]] || "xMidYMid"; return ( <RNSVGImage ref={ele => { this.root = ele; }} {...extractProps({ ...props, x: null, y: null }, this)} x={x} y={y} width={width} height={height} meetOrSlice={meetOrSlice} align={align} src={Image.resolveAssetSource(href)} /> ); }
images.map((image, index) => { Image.getSize(image, (width, height) => { this.state.imageHeight[index] = imageWidth * height / width; this.setState({'imageHeight': this.state.imageHeight}); }); })
it('type warn of loading', () => { const wrapper = shallow(<Button type="warn" loading />) const opaqueTypeRes = wrapper.find(Image).at(0).prop('source') expect(opaqueTypeRes).toBe(1) expect(Image.resolveAssetSource(opaqueTypeRes).uri).toMatch(/file:\/\//) })