Image cropping plugin


#1

Does anyone know of an image cropping plugin which will work with Ionic 2?


#2

Less of a “will it work with ionic2” and more of “is there a cordova plugin for this”


#3

Which one is better for Ionic2 dev?

or

or

or

Another?

Please can someone with recommend one they have had success with?

I anyone has an example of a successful way how to crop a base64 image, please let me know. All of the above examples look like they use a URI, and not a base64 image (for example like the one returned by the cordova-plugin-camera)

These look to be able to crop base64 images, but seems to only work for Android. Does anyone know of an equivalent for iOS too?


Thanks


#5

Hi Mike,

I am trying to get cordova-plugin-crop working with Ionic 2. I can install it fine with:

$ cordova plugin add --save cordova-plugin-crop

but cannot seem to get a handle on the plugin in my ts file. I am a little confused on how to access the plugin, do I need an import? To what directory? Do you have any ideas please?

I had a look at ionic-native. I have an Ionic 2 app, so I already have it set up, and it does have a number of cordova plugins (e.g. cordova-plugin-camera), which I can access via an import and access the promise.

import { Camera } from 'ionic-native';

My confusion is, how do I get other cordova plugins (i.e. cordova-plugin-crop) into ionic-native? So that I can import it?

import { CropPlugin } from 'ionic-native';

produces the following error:

[ts] 
Module '"e:/Development/IDE/ionic-apps/jobsForHire/node_modules/ionic-native/dist/index"' has no exported member 'CropPlugin'.
import CropPlugin

Appreciate your help.


#6

You can’t and it’s not neccessary. You can use it like in the docs.

Or if you feel like it, you might write a wrapper and add a pull request


#7

Hi maxx0r,

Thanks for the quick reply.

The docs say it can be used as follows:

plugins.crop.promise('/path/to/image', options)
.then(function success (newPath) {
})
.catch(function fail (err) {
})

But how do I get a handle on plugins in my ts file?


#8

When compiled to an app, the plugins object will be bound to the window object. If you run your app on a device, it will be available :slight_smile:


#9

Does that mean, it cannot be tested in a browser?

The CLI gives the following error:

Error TS2304: Cannot find name 'plugins'.

Also my IDE (Visual Studio code) flags it as as an error:

[ts] 
Cannot find name 'plugins'.
any

Apologies, I am a little confused how you mean it can just compile on a devise. That then makes a browser testing environment like http://localhost:8100/ionic-lab redundant?


#10

I think I know what you mean, apologies. I will try the following:

    var options = null;
    window['plugins'].crop.promise('/path/to/image', options)
    .then(function success (newPath) {
    })
    .catch(function fail (err) {
    })

#11

You can test it before accessing

if(window.plugins && window.plugins.crop) {

// You code
} else {
console.info("Crop plugin not available")
}

Ionic 2 set up plugins
#12

Thanks maxx0r, I just tested it on my device and it works.

I have been struggling with this, to thank you.


#13

Great :slight_smile: I’ve been there too, glad I could help.


#14

did you found a plugin or script for cropping base64 image @richardmarais?


#15

I do the following. It takes a photo or allows picking from gallery depending on PictureSourceType, and then crops the image and saves as base64.

import { Camera } from 'ionic-native';
    takePhoto(pictureSourceType) {
        this.takeThePhoto(navigator.camera.PictureSourceType.CAMERA);
    }
    pickImage() {
        this.takeThePhoto(navigator.camera.PictureSourceType.SAVEDPHOTOALBUM);
    }
    takeThePhoto(pictureSourceType) {
        Camera.getPicture({
            sourceType: pictureSourceType,
            destinationType: Camera.DestinationType.FILE_URI,
            quality: 50,
            targetWidth: 720,
            correctOrientation: true,
            encodingType: Camera.EncodingType.JPEG
        })
            .then(
            imageURI => {
                window['plugins'].crop.promise(imageURI, {
                    quality: 75
                }).then(newPath => {
                        return this.toBase64(newPath).then((base64Img) => {
                            this.base64Image = base64Img;
                        });
                    },
                    error => {
                        console.log("CROP ERROR -> " + JSON.stringify(error));
                        alert("CROP ERROR: " + JSON.stringify(error));
                    }
                    );
            },
            error => {
                console.log("CAMERA ERROR -> " + JSON.stringify(error));
                alert("CAMERA ERROR: " + JSON.stringify(error));
            }
            );
    }
    toBase64(url: string) {
        return new Promise<string>(function (resolve) {
            var xhr = new XMLHttpRequest();
            xhr.responseType = 'blob';
            xhr.onload = function () {
                var reader = new FileReader();
                reader.onloadend = function () {
                    resolve(reader.result);
                }
                reader.readAsDataURL(xhr.response);
            };
            xhr.open('GET', url);
            xhr.send();
        });
    }
    resize(base64Img, width, height) {
        var img = new Image();
        img.src = base64Img;
        var canvas = document.createElement('canvas'),ctx = canvas.getContext('2d');
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);
        return canvas.toDataURL("image/jpeg");
    }

#16

Thx a lot for sharing the code, works really well.

Did you also find a way to specify the size (width/height) of the cropped image?


#17

Here you go:

> this.base64Image = this.resize(this.base64Image, 150, 150);


Camera, ImagePicker permission to access media
#18

Cool thx, I should had scroll before.

Tried but somehow my images wasn’t resized correctly.

I didn’t search that much longer because I’m also not sure that this plugin is the solution for my app. I would also like to have a fixed aspect ratio of the “cropper selector” which is actually not possible (https://github.com/jeduan/cordova-plugin-crop/issues/8)


#19

I am getting a permission error Not allowed to load local resource: file:///storage/emulated/0/Android/data/......
any idea’s?


#20

I’m not sure where you are running it, but it doesn’t work in a browser. Do a cordova build and install the apk on your device.


#21

i’m running in emulator, the error fixes when i dont run with -l -c … when i run without it works fine.