【问题标题】:User cannot upload image of file size more than 4MB image用户无法上传文件大小超过 4MB 的图像
【发布时间】:2019-07-05 16:15:50
【问题描述】:

用户不应该上传图片

文件大小不应超过 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)
        });  
    }

【问题讨论】:

    标签: camera ionic4


    【解决方案1】:

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

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

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

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

    你可能想试试这个:

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

    调整图像大小非常简单:

    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 次以减小到目标文件大小对用户来说可能会很慢。

    【讨论】:

    • 非常感谢您的回复。使用图像调整器,我们可以调整图像的大小,但我们如何限制上传文件大小不超过 4MB 的图像。访问此链接:stackoverflow.com/questions/46075271/…
    猜你喜欢
    • 2015-11-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-10-15
    • 1970-01-01
    • 2011-07-06
    • 2015-10-01
    相关资源
    最近更新 更多