react-native-fast-image
react-native-fast-image copied to clipboard
DylanVann
Android Image Display Blur
Hi @fannaoshaoxiang! Could you please provide screenshots and maybe a code sample to show more about this issue? Thanks!
same issue, and i find a solution
/**
* Created by kalaliu on 2017/8/25.
*/
import React from 'react'
import _ from 'lodash'
import {Thumbnail} from 'native-base'
import FastImage from 'react-native-fast-image'
import device from '../nice-router/device'
import {
loadLargeImg,
loadMiddleImg,
loadNormalImg,
loadOriginImg,
loadServerImage,
loadSmallImg,
loadSourceImg,
loadTinyImg,
loadWaterfallImg,
loadXLargeImg,
} from '../utils/image/image-tools'
export default class ServerImage extends React.PureComponent {
constructor(props, context) {
super(props, context)
const {width = '100%', height = '50%'} = this.props
this.state = {
width,
height,
}
}
onLoad = e => {
const {
nativeEvent: {width, height},
} = e
// console.log('auto resize.onLoad')
const result = this.getAutoSize(width, height)
// console.log('auto resize.onLoad,calc result', result)
this.setState({
width: result.width,
height: result.height,
})
if (this.props.onLoad) {
this.props.onLoad(e)
}
}
getAutoSize = (imageWidth, imageHeight) => {
const {width, height, outlineWidth = 20} = this.props
const ratio = imageHeight / imageWidth
let targetWidth = _.isNumber(width) ? width : null
let targetHeight = _.isNumber(height) ? height : null
// fitWidth
if (targetWidth && !targetHeight) {
targetHeight = targetWidth * ratio
}
// fixHeight
if (!targetWidth && targetHeight) {
targetWidth = targetHeight / ratio
}
// fixConstrain
if (targetWidth && targetHeight) {
const constrainRatio = targetHeight / width
if (ratio > constrainRatio) {
// 长图
targetWidth = targetHeight / ratio
} else {
targetHeight = targetWidth * ratio
}
}
// 100%
if (!targetWidth && !targetHeight) {
targetWidth = device.width - outlineWidth
targetHeight = targetWidth * ratio
}
targetWidth = _.isNumber(targetWidth)
? _.toNumber(targetWidth.toFixed(2))
: targetWidth
targetHeight = _.isNumber(targetHeight)
? _.toNumber(targetHeight.toFixed(2))
: targetHeight
// console.log(
// 'auto resize target',
// targetWidth,
// targetHeight,
// 'remote image size',
// imageWidth,
// imageHeight
// )
const result = {
width: targetWidth,
height: targetHeight,
}
return result
}
render() {
const {
source,
size = 'normal',
thumbnail,
autoResize,
...others
} = this.props
let {uri = ''} = source
if (uri.length === 0) {
return null
}
// source.uri="https://xubai-public.oss-cn-beijing.aliyuncs.com/upload/MoyiUser/MU101354/2018/1026/072552_9293183.4288x2848.jpg"
switch (size) {
case 'tiny':
uri = loadTinyImg(source.uri)
break
case 'small':
uri = loadSmallImg(source.uri)
break
case 'middle':
uri = loadMiddleImg(source.uri)
break
case 'normal':
uri = loadNormalImg(source.uri)
break
case 'large':
uri = loadLargeImg(source.uri)
break
case 'xlarge':
uri = loadXLargeImg(source.uri)
break
case 'origin':
uri = loadOriginImg(source.uri)
break
case 'waterfall':
uri = loadWaterfallImg(source.uri)
break
case 'source':
uri = loadSourceImg(source.uri)
break
default:
uri = loadServerImage(uri)
}
if (!uri.startsWith('http')) {
console.warn(`invalidate image form server-image${uri}`)
return null
}
if (thumbnail) {
return <Thumbnail {...others} source={{uri}} />
}
if (autoResize) {
const {style, width, height, ...otherProps} = others
// console.log('auto resize', uri, this.state)
return (
<FastImage
resizeMode={FastImage.resizeMode.contain}
{...otherProps}
style={{
...style,
width: this.state.width,
height: this.state.height,
alignSelf: 'center',
}}
onLoad={this.onLoad}
source={{uri}}
/>
)
}
return <FastImage {...others} source={{uri}} />
}
}
log here
some blur issue {width: 330, height: "50%"}
some blur issue {width: 330, height: 1248.65}
solution: remove default value of height
constructor(props, context) {
super(props, context)
const {width = '100%', height = '50%'} = this.props
....
}
to
constructor(props, context) {
super(props, context)
const {width = '100%', height } = this.props
....
}
log here
some blur issue {width: 330, height: undefined}
some blur issue {width: 330, height: 1252.17}
My solution is to set the default height to "auto"
Could you please show us the code?
<FastImage source={ source.uri ? {...source, priority: FastImage.priority.high} : source } style={style} />
I resolved blurry images on Android by adding .dontTransform() to the Glide builder: https://github.com/DylanVann/react-native-fast-image/blob/0439f7190f141e51a391c84890cdd8a7067c6ad3/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java#L99
if (requestManager != null) {
requestManager
// This will make this work for remote and local images. e.g.
// - file:///
// - content://
// - res:/
// - android.resource://
// - data:image/png;base64
.load(imageSource.getSourceForLoad())
.dontTransform()
.apply(FastImageViewConverter.getOptions(context, imageSource, source))
.listener(new FastImageRequestListener(key))
.into(view);
}
}
Seems that image was downscaled by Glide after downloading it.
Hope this helps you all!
is work
I resolved blurry images on Android by adding .dontTransform() to the Glide builder:
https://github.com/DylanVann/react-native-fast-image/blob/0439f7190f141e51a391c84890cdd8a7067c6ad3/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java#L99
if (requestManager != null) { requestManager // This will make this work for remote and local images. e.g. // - file:/// // - content:// // - res:/ // - android.resource:// // - data:image/png;base64 .load(imageSource.getSourceForLoad()) .dontTransform() .apply(FastImageViewConverter.getOptions(context, imageSource, source)) .listener(new FastImageRequestListener(key)) .into(view); } }Seems that image was downscaled by Glide after downloading it.
Hope this helps you all!
This worked for me, are there any implications to making this change (performance, etc)?
It happens to us if we calculate height and width dynamically. It does not happen on fixed height and width.
- on first load, the small image is loaded and displayed (i guess the small size ist scaled to final container size and this causes the "bluriness")
- later the image is not reloaded/redrawn and used from cache even if the container size changed.
Try to render not before you have the final sizes. This worked for us.
Hope this helps.
Happens only on Android devices.
