Looses quality on captureFrame

[PARAGJYOTI]

I was trying to capture the Surface and save the Image , but it significantly looses quality . Not only that , this doesn't retain the original file size . One small size image of 68 kb became 1.2 mb after save and Another large image of 3 mb became 768 kb . But increasing the pixelRatio , increases the quality but crashes the app saying 'GLImage unmounting' . Note that I already set quality 1 .

  //With default pixelatio  
  <Surface ref='surface'  height={400} width={width}>
              {this.renderPreview(this.state.effect,'contain')}
    </Surface> 
  
  // With custom pixelRatio     //app crashes on some images especially which have greater width 
        <Surface ref='surface'  pixelRatio={PixelRatio.get()*2}  height={400} width={width}>
              {this.renderPreview(this.state.effect,'contain')}
        </Surface> 
  


 renderPreview( effect, resizeMode){
  var imageuri=this.props.images[this.props.images.length-1]
  
  var img= <GLImage
           source= {imageuri || "https://drscdn.500px.org/photo/207650603/q%3D80_m%3D2000/a22666cde88456340675c9f1c16971c9"}
          resizeMode={resizeMode} />   
   return img

}
captureImage(){
  var config=  {quality: 1, type: 'jpg',  format: 'file',filePath:'/storage/emulated/0/DCIM/IMG_20170417_'+Date.now()+'.jpg' }
   
  this.refs.surface.captureFrame(config)
      .then(function(data){
          console.log(data)
      })
      .catch(function(err){
         console.log(err)
      })


}

Is this because of high memory consumption or I am doing something wrong ?

[superandrew213]

PixelRatio should be the ratio between your original image size and the Surface. In your example above if your original image is 800x800px and Surface is 400x400x, then pixelRatio should be 2. Then when you captureFrame, you should get a 800x800px image.

[gre]

on Android I think there is a technical limitation that we can't create Bitmap greater than the screen pixel size. I have not investigate more on this subject but opened to PR

[superandrew213]

@gre it actually works for me for both Android and iOS

[code-by]

Hello! I need to capture image from Surface.

<Surface
    width={width}
    height={height}
    ref={(r) => { console.log(r ? r.captureFrame : 'undefined'); }}
>

log/output:

[Function: captureFrame]
'undefined'
...
[Function: captureFrame]
'undefined'
...

it is not strange behavior?

[SiddharthRana]

Any found the solution for this?