Сжатие изображения в реагирующем - PullRequest
Новая
       50

Сжатие изображения в реагирующем

6 голосов
/ 06 марта 2020

Я пытаюсь сжать изображения с помощью mozjpeg , когда я реализовал его в node.js в соответствии с документацией, он работал нормально. 

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

Мне нужно выполнить сжатие на на стороне клиента, поэтому я попытался сделать то же самое с реактивом-родным, так как реактив-натив не содержит модулей базовых узлов, таких как fs, мне нужно go для сторонней библиотеки act-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);

client- сторонняя реализация 

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

Вот список того, что я пробовал

  • Попытка ввода ввода в шестнадцатеричном, буферном, base64 и обычном виде строки URL.
  • Поскольку Android URL содержит file:// в качестве префикса. Я также пытался удалить их.

Ответы [ 3 ]

1 голос
/ 16 марта 2020

На самом деле я не знаю о mozjpeg, но я предпочитаю использовать чистый JavaScript путь в среде проблемы, чтобы решить мою проблему.

Я думаю, ваша мысль упала в одну сторону b ios, оставьте решение NodeJS, вы находитесь в реактивной среде, поэтому используйте React Native Image Compress Image или React Native Image Resizer .

На основе по своему опыту я предпочитаю использовать второй, 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 голос
/ 16 марта 2020

Кроме того, есть еще одна хорошая библиотека сбора изображений React-Native , предназначенная для захвата и обрезки некоторых изображений, но с хорошей способностью их сжимать. может быть, в этой библиотеке есть хороший алгоритм сжатия, такой как mozjpeg .

. Он может открывать камеру, открывать галерею или использовать постоянное изображение, даже если вы можете включить обрезку: 

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

Хорошо для настройки, и у него есть много вариантов для настройки. Я надеюсь, что это поможет вам.

1 голос
/ 09 марта 2020

Вы можете найти в mozjpeg- js do c, что входным аргументом является:

типизированный массив или буфер данных

fs.readFile тип возврата на стороне клиента (react-native-fs): Promise<string> и возвращаемое содержимое. ( Do c)

Но на стороне сервера (fs) fs.readFileSync возвращает объект буфера. ( Do c)

Таким образом, вы можете изменить строку на типизированный массив с помощью этой функции: 

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;
}
...