用户无法上传文件大小超过 4MB 的图像

Question

用户不应该上传图片

文件大小不应超过 4MB

 takePicture() {    //camera option(take image with camera)
        const options: CameraOptions = {
          quality: 70,
          destinationType: this.camera.DestinationType.DATA_URL,
          sourceType: this.camera.PictureSourceType.CAMERA,
          encodingType: this.camera.EncodingType.JPEG,
          mediaType: this.camera.MediaType.PICTURE,
          saveToPhotoAlbum:false
        }

      this.camera.getPicture(options).then((imageData) => {
         this.base64Image = 'data:image/jpeg;base64,' + imageData;
         }, (err) => {
         console.log(err)
        });  
    }

Answer 1

您不应该对图像使用 base64。这是因为它会使用过多的内存使旧设备上的应用程序崩溃。

更好的解决方案是将其保存到文件中。

您的 4mb 上传限制与相机插件无关。

你需要一个不同的插件来调整图像的大小。

你可能想试试这个：

• Image Resizer - Ionic Documentation

但是，通过几次搜索，我找不到任何可以调整到特定目标文件大小的插件。它们只处理尺寸和图像质量的变化。

调整图像大小非常简单：

import { ImageResizer, ImageResizerOptions } from '@ionic-native/image-resizer/ngx';

constructor(private imageResizer: ImageResizer) { }

...

let options = {
 uri: uri,
 folderName: 'Protonet',
 quality: 90,
 width: 1280,
 height: 1280
} as ImageResizerOptions;

this.imageResizer
  .resize(options)
  .then((filePath: string) => console.log('FilePath', filePath))
  .catch(e => console.log(e));

为了满足您的文件大小要求，我会做两件事：

1. 实验看看什么样的尺寸/质量评级会产生大约 4mb 的图像
2. 考虑添加一个文件大小检查，该检查将循环并不断删除降低质量/进一步压缩的调整大小选项，直到它满足您的文件大小要求。

问题是输出文件大小还取决于图像的类型。复杂的图像很难压缩，因此相同的尺寸 + 压缩比 = 不同的图像尺寸不同。

所以这就是可能需要第二位的原因。或者，您可以设置一个通常在 3mb 左右的调整大小，以便为您提供足够的缓冲区。这可能是最好的，因为将图像大小调整 3-4 次以减小到目标文件大小对用户来说可能会很慢。