Skip to content

Parse PNG or APNG (Animated PNG) to ImageData for React Native

Notifications You must be signed in to change notification settings

flyskywhy/react-native-pixel-png

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-pixel-png

npm version npm downloads npm licence Platform

Parse PNG or APNG (Animated PNG) to ImageData for React Native.

Installation

$ npm install react-native-pixel-png

For RN >= 0.65, run npm install react-native-blob-util.

For RN < 0.65, run npm install react-native-blob-util@0.16.3, and patch manually to fix: with react-native-web product build will export 'URIUtil' (reexported as 'URIUtil') was not found.

var pixelPng= require('react-native-pixel-png');
console.log(pixelPng); //function

API

pixelPng.parse(file) -> promise.then(images)

return images is Array contains one or more ImageData.

var file= 'https://59naga.github.io/fixtures/animated.PNG';

pixelPng.parse(file).then(function(images){
  var i= 0;

  console.log(images.numPlays); // 0(Infinite)
  console.log(images.playTime); // 1600

  var nextImage= function(){
    var imageData= images[i++];
    if(imageData==null) return;

    console.log(imageData);
    nextImage();
  }

  nextImage();
});
// { width: 73, height: 73, left: 0, top: 0, delay: 1000, disposeOp: 0, blendOp: 0, interlace: false, alpha: true, bpp: 1, color: true, colorType: 3, depth: 8, gamma: 0, height: 57, interlace: false, data: <Uint8Array ..> }
// { width: 73, height: 73, left: 0, top: 0, delay: 900, disposeOp: 0, blendOp: 0, interlace: false, alpha: true, bpp: 1, color: true, colorType: 3, depth: 8, gamma: 0, height: 57, interlace: false, data: <Uint8Array ..> }
// { width: 73, height: 73, left: 0, top: 0, delay: 800, disposeOp: 0, blendOp: 0, interlace: false, alpha: true, bpp: 1, color: true, colorType: 3, depth: 8, gamma: 0, height: 57, interlace: false, data: <Uint8Array ..> }
// ...
// If not animated png, will be
// [{width: 35, height: 35, alpha: true, bpp: 4, color: true, colorType: 6, depth: 8, gamma: 0, interlace: false, palette: false, data: <Uint8Array ..>}]

images can be resized and also keep property e.g. delay by resizeImageDatas of react-native-pixel-util.

Related projects

License

MIT

About

Parse PNG or APNG (Animated PNG) to ImageData for React Native

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%