JSPM

react-native-pixel-png

1.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5
  • Score
    100M100P100Q34843F
  • License MIT

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

Package Exports

  • react-native-pixel-png
  • react-native-pixel-png/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-pixel-png) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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