PIYO - Tech & Life -

React Nativeで画像のRGBA値を得る

JS ReactNative

React Nativeで画像のRGBA値が欲しくて調べてたらreact-native-image-toolsというライブラリを見つけました。

GitHub - Benjamin-Lin-X/react-native-image-tools
Contribute to Benjamin-Lin-X/react-native-image-tools development by creating an account on GitHub.
github.com

かなり名前が近い別パッケージもあるので混同注意です。

% npm -i react-native-image-tool
% react-native link react-native-image-tool

で導入できます。

インターフェースはざっくり

  • createBinaryImage
  • GetImageRGBAs

な2つしかないようです。このうち、GetImageRGBAsのほうを使いました。

画像のURLを渡すと結果が返ってくるという形です。結果には、width、height、およびrgbaというRGBAの配列が返ってきます。

以下は、この画像を読み込んでみる例です。

https://imgur.com/download/OSEiha9

import ImageTools from 'react-native-image-tool';

const url = 'https://imgur.com/download/OSEiha9';
ImageTools.GetImageRGBAs(url)
  .then(response => {
    // response.rgba
  });

さてこのRGBAの配列ですが、32bitの符号付き整数として返ってきます。

response.rgba[0]
// => -16776961

例えば0番目には-16776961という値が入っています。これを符号無しにしてビット演算でRGBA毎の値に変換してあげないといけません。

（そのまま一気に行けそうな気もするけど個人的にわかりにくいから、符号なしにしてから各成分を取り出してます）

以下の関数を定義して、-16776961を変換してみます。

unsigned(signedValue) {
  return signedValue >>> 0;
}

red(unsignedValue) {
  return (unsignedValue >> 0) & 0xff;
}

green(unsignedValue) {
  return (unsignedValue >> 8) & 0xff;
}

blue(unsignedValue) {
  return (unsignedValue >> 16) & 0xff;
}

alpha(unsignedValue) {
  return (unsignedValue >> 24) & 0xff;
}

const val = response.rgba[0];
const u = unsigned(val);
// => 4278190335

const r = red(u);
// => 255

const g = green(u);
// => 0

const g = blue(u);
// => 0

const a = alpha(u);
// => 255

という感じでRとAが255、GとBが0だということがわかりました。0番目は画像の左上で赤が正しいので、結果も合っていそうです。

response.rgbaは配列なので、mapなどを使えば一気に赤成分だけ取り出すことも可能です。

const redArray = response.rgba.map(value => {
  const uint = unsigned(value);
  return red(uint);
});