User cannot upload image of file size more than 4MB image - camera

Question

user should not upload image
file size should not be more than 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

You shouldn't use base64 for the image. This is because it will crash the app on older devices by using too much memory.
The better solution is to save it to file.
Your 4mb upload limit is not related to the camera plugin though.
You need a different plugin to resize the image.
You might want to try this one:
Image Resizer - Ionic Documentation
However, from a few searches, I cannot find any plugins that will resize to a certain target file size. They only handle dimensions and image quality changes.
Resizing the image is quite straightforward:
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));
To meet your file size requirement I would do two additional things:
Experiment to see what sort of dimensions/quality ratings produce images around 4mb
Consider adding a file size check which will loop and keep dropping resizing options that lower the quality / compress it more until it meets your file size requirement.
The thing is that the output filesize also depends on the type of image. Complicated images are hard to compress so the same dimensions + compression ratio = different sizes for different images.
So that's why the second bit might be required. Alternatively, you could just set a resize that is normally around 3mb to give you enough buffer. This would probably be best as resizing the image 3-4 times to get down to a target file size could be slow for the user.