How to make ionic native Crop spit out base64 data instead of path?

Ionic Framework ionic-v3
1

Well, I read the original cordova doc and it says it’s not supported at the moment.

I tried the base64 plugin and it works perfectly on android:

 this.camera.getPicture(options).then((imageData) => {
			return this.crop.crop(imageData, { quality: 75 });
		}).then(croppedImagePath => {
			return this.base64.encodeFile(croppedImagePath)
		}).then(base64Data => {
			this.updateLogo(base64Data);
		}).catch(err => {
			console.log(err)
		});

But it’s not working on ios. On ios, I received error like this:

However, the solution on the link doesn’t work in this case, since ionic 3 uses ionic-webview and it doesn’t support cdv:///.

I read another thread on the forum

I prefer to make it work without using cropperjs if possible.

Any advice would be much appreciated!

2

Have you try on iOS using path/fileURI and normalizing the url? See normalizeURL https://ionicframework.com/docs/wkwebview/

Generally speaking, I think that using uri might be less memory consuming as base64 and therefore better, but that’s only my point of view. So if possible, I would advice to stick to file.

About crop, the plugin looks cool, didn’t knew it, thx :wink: I use cropperjs, I’m happy with it. The plus of this lib is that it would works in a PWA too.

3

thx for your help. My current backend logic takes base64 and other data. I will change it in the future.
I tried nomalizeURL and ionic complainted that it couldn’t find the file. I didn’t work for me.

For my PWA app, I use https://github.com/web-dave/ngx-img-cropper currently. Thanks for mentioning the cropperjs on the other thread. It looks cool! and very powerful. I will take a look at it.

I hope the Ionic team will improve the native Crop plugin :slight_smile:

4

nomalizeURL work for me with cropperjs, maybe there is something specific to the crop plugin you mentioned?

Notes:

  • I guess the Ionic team won’t improve this plugin since it’s not made by them :wink:
  • About your backend, you could receive or send the images in base64 and convert them to files in your app, that would be an idea too (cordova-plugin-file to save file locally)

About ngx-img-cropper, yep I know it but I’ve to say I rather like cropperjs

Good luck

5

Check if this Ionic 4 tutorial helps

Ionic 4 | Crop Images selected from Image Selector show in base64 format using Native plugins