web-dev-qa-db-ja.com

反応ネイティブでの画像圧縮

私はそれがうまく機能したドキュメントに従ってnode.jsに実装したときに、 mozjpeg で画像を圧縮しようとしています。

_const input = fs.readFileSync("in.ppm");
const out = mozjpeg.encode(input, { quality: 85 });
_

クライアント側で圧縮を行う必要があるので、react-nativeにはfsなどのコアノードモジュールが含まれていないため、react-nativeでも同じことを実行しようとしました。サードパーティのライブラリを使用する必要があります react-native-fs ファイル読み取り用。

反応ネイティブでmozjpeg.encode(input, { quality: 85 });を実行しようとすると、_Unrecognized input file format --- perhaps you need -targa_がスローされます

サーバー側の実装

_const mozjpeg = require("mozjpeg-js");
const fs = require("fs");

const input = fs.readFileSync(filePath);
const out = mozjpeg.encode(input, { quality: 85 });
console.error(out.stderr);
fs.writeFileSync("out.jpg", out.data);
_

クライアント側の実装

_fs.readFile(image.path).then(data => {
    const out = mozjpeg.encode(data, { quality: 85 });
    console.log(out);
}
_

これが私が試したもののリストです

  • 16進数、バッファ、base64、プレーンURL文字列で入力を試みました。
  • Android URLにはプレフィックスとして_file://_が含まれているため、それらも削除しようとしました。
javascriptandroidreact-nativeimage-compressionmozjpeg
6
Badri

実際、私はmozjpegについては知りませんが、問題を解決するために問題の環境で純粋なJavaScriptを使用することを好みます。

私はあなたの考えが一方向のBIOSに落ちたと思います、NodeJSソリューションを残してください、あなたは反応ネイティブ環境にいるので React Native Compress Image または React Native Image Resizer を使用します。

私の経験に基づいて、私は2番目の React Native Image Resizer を使用することを好みます。

インストール後、以下のように使用します：

ImageResizer.createResizedImage(
  imageUri,
  newWidth,
  newHeight,
  compressFormat,
  quality
)
  .then( resizedImageUri => {

    // the resizedImageUri is accessible here to use.

  }).catch( err => {

  // Catch any error here.

});
1
AmerllicA

また、別の優れた React-Native画像切り取りピッカー ライブラリーがあり、その目的は一部の画像を取得して切り取ることですが、圧縮する優れた機能を備えています。多分このライブラリはmozjpegのような良い圧縮アルゴリズムを持っています。

カメラを開いたり、ギャラリーを開いたり、一定の画像を使用したりできます。トリミングを無効にすることもできます。

ImagePicker.openCamera({
  width: 300,
  height: 400,
  compressImageQuality: 0.2
}).then(image => {
  // do what you want
}).catch(e => {
  // handle error
});

設定に適しており、チューニングのための多くのオプションがあります。お役に立てば幸いです。

1
AmerllicA

mozjpeg-js docで、入力引数が次のようになっていることがわかります。

型付き配列またはデータのバッファ

fs.readFileクライアント側の戻り値の型（react-native-fs）はPromise<string>とコンテンツを返します。 （ Doc ）

しかし、サーバー側（fs）では、fs.readFileSyncバッファオブジェクトを返します。 （ Doc ）

したがって、次の関数を使用して文字列を型付き配列に変更できます。

function str2ta(str) {
  var bufView = new Uint16Array(str.length*2); // 2 bytes for each char
  for (var i=0, strLen=str.length; i<strLen; i++) {
    bufView[i] = str.charCodeAt(i);
  }
  return bufView;
}
1
Mohsen