Nativescript-imagecropper plugin not working


#1

As i want to do Image Cropping functionalities, there is one nativescript plugins but which is not working. Can you people help us to achieve this requirement. i am using xml and javascript .

tns plugin add nativescript-imagecropper

imageCropper.show(source).then((args) => {
if(args.image !== null){
image.imageSource = args.image.imageSource;
}
})
.catch(function(e){
console.dir(JSON.stringify(e));
});

and am getting error.


#2

Hi @SugumarParthi
Have you followed everything mentioned in the readme?

https://www.npmjs.com/package/nativescript-imagecropper


#3

Hi @multishiv19
Yes i followed all the procedure which was mentioned in the plugins.
am getting response from catch.

thanks for your response. :slight_smile:


#4

It would help if you included what the error/behavior is. Stating simply it doesn't work does not allow us to help you without any leading questions, which can be spared.


#5

Hi ,
This is my code:
camera.takePicture({width:300,height:300,keepAspectRatio:true})
.then((imageAsset) => {
let source = new imageSource.ImageSource();
source.fromAsset(imageAsset).then((imageSource1) => {
var imageCropper = new icModule.ImageCropper();
imageCropper.show(imageSource1).then((args) => {
console.dir(args);
if(args.image !== null){
imageView.src = args.image;
}
})
.catch(function(e){
console.dir(e);
});
});
}).catch((err) => {
console.log("Error -> " + err.message);
});

am getting this error:

TypeError: undefined is not an object (evaluating ‘_options.lockSquare’)


#6

@SugumarParthi
Please change this part
imageCropper.show(imageSource1)
to this
imageCropper.show(imageSource1,{lockSquare: false})


#7

@multishiv19

Its working…
i want cropping area is should be fixed. how can i change the fixed crop area. like square, rectangle and cricle.

Thank you … :slight_smile:


#8

Just pass width and height, like in the documentation.

passing lockSquare = true, is needed for iOS


#9

Hi @multishiv19

i want to do image zooming with scroll. after zooming image should be scroll with in the layout.

This code for zooming:
selectedImage.on(gestures.GestureTypes.pinch, function (args) {
selectedImage.animate({
scale: { x:args.scale, y:args.scale}
});
});

This code for panning:
selectedImage.on(gestures.GestureTypes.pan, function (args) {
selectedImage.animate({
translate: { x:args.deltaX, y:args.deltaY}
});
});
but this is not working properly. can you help us.


#10

why don’t you use this plugin instead? @SugumarParthi


#11

@multishiv19

I know about this plugin…
but i my case i need to do scale and pan in with in the layout.
here added the code .

This is working but not properly.

selectedImage.on(gestures.GestureTypes.pinch, function (args) {

    if (args.state === 1) {
        const newOriginX = args.getFocusX() - selectedImage.translateX;
        const newOriginY = args.getFocusY() - selectedImage.translateY;

        const oldOriginX = selectedImage.originX * selectedImage.getMeasuredWidth();
        const oldOriginY = selectedImage.originY * selectedImage.getMeasuredHeight();

        selectedImage.translateX += (oldOriginX - newOriginX) * (1 - selectedImage.scaleX);
        selectedImage.translateY += (oldOriginY - newOriginY) * (1 - selectedImage.scaleY);

        selectedImage.originX = newOriginX / selectedImage.getMeasuredWidth();
        selectedImage.originY = newOriginY / selectedImage.getMeasuredHeight();

        startScale = selectedImage.scaleX;
    }

    else if (args.scale && args.scale !== 1) {
        let newScale = startScale * args.scale;
        newScale = Math.min(8, newScale);
        newScale = Math.max(0.125, newScale);

        selectedImage.scaleX = newScale;
        selectedImage.scaleY = newScale;
    }
});
selectedImage.on(gestures.GestureTypes.pan, function (args) {
    //console.log("Pinch Scale: " + args.scale);
    // selectedImage.animate({
    //     translate: { x:args.deltaX, y:args.deltaY}
    // });
    if (args.state === 1) {
        prevDeltaX = 0;
        prevDeltaY = 0;
    }
    else if (args.state === 2) {
        selectedImage.translateX += args.deltaX - prevDeltaX;
        selectedImage.translateY += args.deltaY - prevDeltaY;

        prevDeltaX = args.deltaX;
        prevDeltaY = args.deltaY;
    }
});

but i need like this:

the same code i implemented. but this scale and pan in too slow. i don’t know why?