Android Image Display Blur

[Link-Kou]

Displaying images in ios is not blurred

Blur picture on Android

[gao520sun]

+1

[johnlim5847]

do you guys have any temp solution for this bug?

[Ilphrin]

Hi @fannaoshaoxiang! Could you please provide screenshots and maybe a code sample to show more about this issue? Thanks!

[erennyuksell]

same here

[kala888]

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}

[hanwenbo]

+1

[hanwenbo]

My solution is to set the default height to "auto"

[meiqi1992]

+1

[iKoru]

any solutions for this problem?

[zyestin]

My solution is to set the default height to "auto"

Could you please show us the code?

[wheelswang]

+1

[0xleeaki]

<FastImage source={ source.uri ? {...source, priority: FastImage.priority.high} : source } style={style} />

[yurik94]

I resolved blurry images on Android by adding .dontTransform() to the Glide builder:

react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java

Line 99 in 0439f71

requestManager

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!

[ahtisham09]

i having same issue Images blur on android but its working fine on IOS

[raymenchow]

is work

[pateljoel]

Is there any update on this????

[thame]

I resolved blurry images on Android by adding .dontTransform() to the Glide builder:

react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java

Line 99 in 0439f71

requestManager

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)?

[thame]

The change above seems to cause a significant memory leak on Android.

[sven09]

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.

[BAEBAEWANGD]

Outer layer add View tag
just like<View><FastImage /></View>

[gajjartejas]

@BAEBAEWANGD Wonderful!

[BubbleTrouble14]

Any fix available in 2022 ?

[hezhengjian]

FastImage.cacheControl.immutable is work for me