react native中的图像压缩

Question

当我在node.js中实现mozjpeg时，我正试图用它压缩图像，根据文档，它运行良好。

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

我需要在客户端进行压缩，所以我尝试对react native进行同样的压缩，因为react natives不包含fs等核心节点模块，所以我需要使用第三方库react naturefs来读取文件。

当我尝试在react native中执行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);
}

这是我试过的的清单

• 尝试以十六进制、缓冲区、base64和纯URL字符串提供输入
• 由于Android URL包含file://作为前缀，我也尝试删除它们

Answer 1

实际上我不知道mozjpeg，但我更喜欢在问题环境中使用纯JavaScript的方式来解决我的问题。

我想你的想法是单向bios，抛开NodeJS解决方案不谈，你在react原生环境中，所以使用react native Compress Image或react NativeImage 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.
});

Answer 2

此外，还有另一个很好的React Native图像裁剪选择器库，它的目的是抓取一些图像并裁剪它们，但它有很好的压缩能力。也许这个库有一个很不错的压缩算法，比如mozjpeg。

它可以打开相机，打开图库或使用恒定的图像，甚至你可以打开裁剪：

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

配置很好，而且它有很多调优选项。我希望它能帮助你。

Answer 3

您可以在mozjpeg-js-doc中找到输入参数为：

数据的类型化数组或缓冲区

---

fs.readFile客户端返回类型(react-native-fs(为Promise<string>，返回内容。(文件(

但在服务器端(fs(，fs.readFileSync返回缓冲区对象。(文件(

---

因此，您可以使用以下函数将字符串更改为类型化数组：

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

Answer 4

Expo有一个组件可以做到这一点：图像操纵器