Hi,
After loading the image, I need to a) crop, b) save it, c) crop again from the same image, and d) save again. After the first save, I need to clear the preview. How do I do that?

I successfully use ViewChild to get to the img element and clear src attribute. The cropped image did go away. However, cropping the next image (step c above) does not show the cropped image in the preview any more.

Any idea how to reset the preview?
Thanks.

The error in the title is the error I get when using version 1.0.1 of this library with ionic/angular. If I downgrade to 0.1.5, this particular component of our app works just fine. This is actually the resolution I get when googling this particular issue that others have found. The problem is that I actually need to use the newest version 1.0.1 as the downgraded version was not working with the rest of our application.
I should mention that I am using Ionic 3 here and it sounds like this was an issue many people were getting with Ionic 3 so I'm guessing that might have something to do with it.
Any idea what might be causing this? Thank you very much for this library btw!

Hi,

can you please remove the "console.log('this.cropperOptions', this.cropperOptions);" in the next version? :-)

I Can not preview the image. its style is always 0 or none.
Can you please let me know how to show the preview and get the cropped image?
I go this in html for preview.
<img src="image_03.jpg" width="1024" height="576" style="display: block; width: 0px; height: 0px; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; transform: none;">

This is a question, Please help me and post some plunker of your plugin to understand the options.
Since this plugin is new in angular, help me out!! Thank you

I just want an event in cropper tag, that if some one move the image the preview image tag refresh and shows the cropped image part. How to do that?

app.module.ts => ..

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SignInPage } from '../pages/sign-in/sign-in';
import { RegisterPage } from '../pages/register/register';
import { ConvertPage } from '../pages/convert/convert';
import { ConvertPageModule } from '../pages/convert/convert.module';
import { AngularCropperjsModule } from 'angular-cropperjs';
import { Camera } from '@ionic-native/camera';

@NgModule({
declarations: [
MyApp,
HomePage,
SignInPage,
RegisterPage
],
imports: [
BrowserModule,
AngularCropperjsModule,
ConvertPageModule,
IonicModule.forRoot(MyApp),

],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
SignInPage,
RegisterPage,
ConvertPage
],
providers: [
StatusBar,
SplashScreen,
Camera,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

})

export class AppModule {}

convert.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Camera,CameraOptions } from '@ionic-native/camera';
import { AngularCropperjsComponent } from 'angular-cropperjs';
/**

• Generated class for the ConvertPage page.
• See https://ionicframework.com/docs/components/#navigation for more info on
• Ionic pages and navigation.
  */

@IonicPage()
@component({
selector: 'page-convert',
templateUrl: 'convert.html',
})
export class ConvertPage {
@ViewChild('angularCropper') public angularCropper: AngularCropperjsComponent;
cropperOptions: any;
croppedImage = null;

myImage = null;
scaleValX = 1;
scaleValY = 1;

constructor(public navCtrl: NavController, private camera: Camera) {
this.cropperOptions = {
dragMode: 'crop',
aspectRatio: 1,
autoCrop: true,
movable: true,
zoomable: true,
scalable: true,
autoCropArea: 0.8,
};
}

captureImage() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.CAMERA
}

this.camera.getPicture(options).then((imageData) => {
  this.myImage = 'data:image/jpeg;base64,' + imageData;
});

}

reset() {
this.angularCropper.cropper.reset();
}

clear() {
this.angularCropper.cropper.clear();
}

rotate() {
this.angularCropper.cropper.rotate(90);
}

zoom(zoomIn: boolean) {
let factor = zoomIn ? 0.1 : -0.1;
this.angularCropper.cropper.zoom(factor);
}

scaleX() {
this.scaleValX = this.scaleValX * -1;
this.angularCropper.cropper.scaleX(this.scaleValX);
}

scaleY() {
this.scaleValY = this.scaleValY * -1;
this.angularCropper.cropper.scaleY(this.scaleValY);
}

move(x, y) {
this.angularCropper.cropper.move(x, y);
}

save() {
let croppedImgB64String: string = this.angularCropper.cropper.getCroppedCanvas().toDataURL('image/jpeg', (100 / 100));
this.croppedImage = croppedImgB64String;
}

}

Hey guys, great plugin around here !

But i don't understand why, i can't crop images smoothy. It's really not ergonomic...

I made a video to show you but I can't post it, so I'll try to explain :/

Here my problem:
When i want to zoom my image, or perform any action on it (zoom in, zoom out, move the square, resize it) it just does it but really slowly, by little movements but never in one shot. I don't know if you guys see what I mean...

Right, just made a GIF, it'll be better ^^
https://gph.is/2BzIH1M

Thanks guys !

EDIT : Just to add an information -> It's smooth and really usable on iOS but on Android it's just blocking after moving some pixels...

Hello,
first of all thanks for the great project! It's really helpful : )

Iam trying to code a static frame, where the crop box should always be the size of the frame and non movable. After setting the minCropWidth and Height value to the same height as the frame () I have the problem, that the crop box does not consider the black space, when pictures that leave blank space (as they don't fill the complete frame) are uploaded.I attached the picture.

Is angular-croppers not considering blank spaces or did I make a mistake with the setup?

Thank you very much in advance,
best wishes Max

When I run:

this.angularCropper.cropper.replace(imageUrl)

image has changed. But when I run:

this.angularCropper.cropper.getCroppedCanvas().toDataURL("image/jpeg");

I got this error:

AppComponent.html:7 ERROR TypeError: Cannot read property 'toDataURL' of null

It means getCroppedCanvas() returns null.

Thanks.

Hello. I have a problem.
I use @angular/core: 6.1.7
Went i add 'AngularCropperjsComponent' to component, i have a error.

Please help me. Thank you so much.

Hey,

I am quite sure this is an easy one but I am struggling for days with this issue and I'd really appreciate some help in here.

I am trying to open the cropper in a overlay (Angular Cdk Overlay component) in order to see a bigger representation of my image to crop.
But when I initialize the cropper, my image is going in full size and the cropper overflow my screen.

If I put an overflow : auto on my angular-cropper element, I'll miss a part of my image.

I would like to tell the cropper that my max-height is 95vh and thus adapt to it directly. Is that possible ?

Any chance we could get the Angular peer dependencies upped to build with Angular 5+ without npm warnings?

This is the warning I get when using Angular 5:

npm WARN [email protected] requires a peer of @angular/core@^4.0.0 but none is installed. You must install peer dependencies yourself.

Maybe something like this is dist package.json:

"peerDependencies": {
    "@angular/core": ">= 4.0.0 <= 5.x.x",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  }

I followed all the steps in docs
but it giving me error
'angular-cropper' is not a known element

I a am using ionic4 ( angular 6)

Followed the instruction provided to use this package,but i am getting an error in the component where i want to import "AngularCropperjsComponent" ,error mentioned below:
node_modules/angular-cropperjs/angular-cropperjs"' has no exported member 'AngularCropperjsComponent'.

Component is not generated by executing the below command:
npm install angular-cropperjs --save

Help me out to solve the problem!!

Any chance we could get the Angular peer dependencies upped to build with Angular 7+ without npm warnings?

angular-cropperjs/src/angular-cropperjs.component.ts

Line 121
this.cropperOptions = Object.assign({
aspectRatio,
movable: false,
scalable: false,
zoomable: false,
viewMode: 1,
checkCrossOrigin: true
}, this.cropperOptions);

Why do this options differ from the default config, that is described in the documentation of cropperjs?

I just spend an hour working out why the cropper.zoom() method is not working while rotate works.

Please update all configs to be the same as the original cropperjs libary.

Hi. I use angular 6.2.2
Cropbox is work. But this.angularCropper.cropper.Sothing done not work.

Please help me. Thank you so much

Hi,
I added your nice package from https://yarnpkg.com/en/package/angular-cropperjs#readme

But got erros that AngularCropperjsComponent cannot be found.
I looked into your dev branch and found that the component was renamed to CropperComponent. :-)

Hello ,
How to Handel Image with Blob not Image URL ,also please there is no sample for this could any one provide some?

Hello,
Is there a way to update cropperOptions after that the cropper component has been already rendered?
Here's an example :
<angular-cropper [cropperOptions]="config" [imageUrl]="imageUrl">
ngOnInit() {
this.config={} //my initial options
}

afterACertainEvent()
{
this.config = {"rotatable":false, "viewMode":3} //
}

When the method afterACertainEvent is fired the angular-cropper component stays the same.
How can I update or rerender the component ?
Thanks

I expected something like
this.angularCropper.cropper.onCropMove(function(event){console.log(event);});
to work. Is this at all supported?

Thanks.

I don't know the reason, but my Ionic app working on iOS 12.2 and not working on iOS 13+. Move, and resize, nothing.

Thanks

I can see an export eventEmitter for the cropper. But not sure how to use it. Can you post an example about how to export the cropped image as blob & base64 data?

Very weird error I'm getting. I had the whole angular-cropper component almost working and styled and everything in my application and then randomly after a refresh I started getting these TypeScript errors...

• Namespace ''*'' has no exported member 'ImageData'
• Namespace ''*'' has no exported member 'CropBoxData'

It appears to not be recognizing these two imports (from cropperjs/dist/cropper) when importing them into angular-cropperjs.component.d.ts. Do you know why this might be?

I am having to use version 0.1.5 because I couldn't get the newest version to work with Ionic, but like I said I had it all working until a random refresh.

Hello, how could I put the circular border on the cropper?

I have an ionic angular project when I choose an image from the gallery and pass it's URL to the imageUrl attribute, It shows the image with a loading for ever and I get this errors

Access to XMLHttpRequest at 'http://localhost/_app_file_/data/user/0/io.ionic.starter/cache/tmp_IMG_20200222_074045_5911062107289033920012.jpg' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to image at 'http://localhost/_app_file_/data/user/0/io.ionic.starter/cache/tmp_IMG_20200222_074045_5911062107289033920012.jpg?timestamp=1582458373914' from origin 'http://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET http://localhost/_app_file_/data/user/0/io.ionic.starter/cache/tmp_IMG_20200222_074045_5911062107289033920012.jpg?timestamp=1582458373914 net::ERR_FAILED

checkCrossOrigin should be optional
https://github.com/fengyuanchen/cropperjs#checkcrossorigin

if (this.cropperOptions && this.cropperOptions.checkCrossOrigin) image.crossOrigin = 'anonymous';

Can you help, please?

It is a "bug" or is there a necessary code step required to avoid the creation of additional ".cropper-container" elements?

Thanks,
MaccabeeY

I tryed alot but i cant find a way to setup a max-width and a max-height for the crop element. If i give the Wrapper Containers some limitation, the cropper still grow out if the box:. http://prntscr.com/kddy17

Any JavaScript setup inline heights and widths. Any Solution for this?

I get this error when I serve my App.

Hey,
I am new to AngularJs and I want to use this CropperJs for my ionic app. how can I import these stuff? Can I rotate the image?

Hi, do you have any plan to upgrade and keep the library always up to date? and do you need probably help?

thank you

I don't know why you told that we can use it anywhere this method. In tutorial also its mentioned. But when I do so its not accessible. It should be present in constructor.
With @ViewChild cant accessible. Please update the document.

this.angularCropper.cropper.getCroppedCanvas().toBlob((blob) =>{
    // blob is your base64..
});

After running ,the command below:
npm run build

I am getting this issue:

Error in node_modules/angular-cropperjs/lib/cropper/cropper.component.d.ts: can't find module cropperjs

Please help me out to resolve the issue,Thank you in advance.

// Import AngularCropperjsComponent
import { AngularCropperjsComponent } from 'angular-cropperjs';

// Get with @ViewChild
@ViewChild('angularCropper') public angularCropper: AngularCropperjsComponent;

ERROR:

/node_modules/angular-cropperjs/angular-cropperjs"' has no exported member 'AngularCropperjsComponent'.

Line 66 angular-cropper.js

//
        // Add crossOrigin?
        console.log('this.cropperOptions', this.cropperOptions);
        if (this.cropperOptions.checkCrossOrigin)
            image.crossOrigin = 'anonymous';
        //
        // Image on ready event

How can i implement 2 croppers in one page

In tag "v1.0.1" within ' angular-cropperjs/projects/angular-cropperjs/src/lib/cropper/cropper.component.ts ' on line 62 there is a console.log added.

In master it has been removed. Would you create a new tag for the current master?

Thanks for all the hard work in this repo...

MaccabeeY

I have a problem with replacing an image.
I have a component in wich on button click I pick image to input in cropper. But, if I choose to repick it cropper sets out two images in cropper. Im using cropper.replace, but its doesnt change anything.

`
@ViewChild('cropperObj', { static: false }) public cropperObj: CropperComponent;

imageSelected: boolean = false;
imgURL: any = 'img/user_none.svg';
croppedImg: string;

onFileSelect(e) {
let files = e.target.files;
var mimeType = files[0].type;
if (mimeType.match(/image/*/) == null) {
alert("Only images are supported.");
return;
}
let reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = (_event) => {
console.log(this.cropperObj.cropper);
this.croppedImg = "" + reader.result
this.cropperObj.cropper.replace(this.croppedImg);
}
this.imageSelected = true;
}`

I tried bringing this, (And just regular cropperjs) into ionic3 and it seems to do nothing. The cropper loads but trying to change it or move the image does nothing. Any suggestions?

Hello,
I installed your package and I am able to get it start, but it seems the above functionality is not working.
cropper.setDragMode("move");
cropper.crop()

you can find the code and the demo app below:
https://imageeditorcropperjs.herokuapp.com/
https://github.com/chr1soscl/imageEditorCropperJS

Why cropper is undefined ?
i'm use

    "angular-cropperjs": "0.1.5",
    "@angular/core": "5.0.0",

@ViewChild('angularCropper') public angularCropper: AngularCropperjsComponent;

    console.log(this.angularCropper)
    console.log(this.angularCropper.cropper)

    this.angularCropper.cropper.getCroppedCanvas().toBlob((blob) => {
           console.log(blob);
    });

i store previous cropped data x , y and width and height. how to and where i set it to show crop box?tnx

Angular 7 -> 8 update
I just updated my project to Angular 8, but the update procedure complained about angular-cropperjs not being compatible.

# ng update @angular/cli @angular/core

Package "angular-cropperjs" has an incompatible peer dependency to "@angular/core" (requires "^6.0.0-rc.0 || ^6.0.0" (extended), would install "8.2.14").

Then I realized that I've successfully been using this package with Angular 7. So I went along and added --force to the update command, and everything worked out just fine.

Using imageSmoothingQuality
The following is probably not related to Angular 8: I needed to add imageSmoothingQuality as an option for getCroppedCanvas. According to the Cropper JS docs, this option takes a string value of either "low", "medium" or "high".

But I got this error:

Type '"low"' is not assignable to type 'ImageSmoothingQuality'

In the file index.d.ts(15) there is a type defined for this value:

enum ImageSmoothingQuality {
    Low = 'low',
    Medium = 'medium',
    High = 'high',
  }

.. which is used in the interface at index.d.ts(65):

export interface GetCroppedCanvasOptions {
    width?: number;
    height?: number;
    minWidth?: number;
    minHeight?: number;
    maxWidth?: number;
    maxHeight?: number;
    fillColor?: string;
    imageSmoothingEnabled?: boolean;
    imageSmoothingQuality?: ImageSmoothingQuality;
  }

No matter how I tried, I could not make it work. So I ended up changing the type to "string" in the above interface:

imageSmoothingQuality?: string;

And now it works like a charm... I wonder why this custom type is necessary when the underlying cropper just expects a string?

Thank you...
... for this fantastic package. I can't encourage you enough to update the compatible versions and maybe fix it a bit here and there. I think it still has a few years in it :-)

I am trying to use dragMode: 'move' in order to move the canvas instead of the crop box, but it doesn't seem to work. Is this option supported in your package?

Screenshot from https://github.com/fengyuanchen/cropper:

The import of following is giving me TypeError: Object(...) is not a function Error.

app.module.ts

import { AngularCropperjsModule } from 'angular-cropperjs';

home.ts

import { CropperComponent } from 'angular-cropperjs';

If I comment both then i get no error, but if I leave un comment either one then I get the mentioned error.

AngularCropperjsService<@http://localhost:8100/build/vendor.js:76641:66 @http://localhost:8100/build/vendor.js:76631:46 webpack_require@http://localhost:8100/build/vendor.js:55:12 219@http://localhost:8100/build/main.js:124:76 webpack_require@http://localhost:8100/build/vendor.js:55:12 196@http://localhost:8100/build/main.js:106:70 webpack_require@http://localhost:8100/build/vendor.js:55:12 webpackJsonpCallback@http://localhost:8100/build/vendor.js:26:23 @http://localhost:8100/build/main.js:1:1

Ionic Framework: 3.9.2 Ionic App Scripts: 3.2.1 Angular Core: 5.2.11 Angular Compiler CLI: 5.2.11 Node: 8.10.0 OS Platform: Windows 10 Navigator Platform: Win32 User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0

When destroy component, cropperjs is not destroed, and we can get some performance issues after render cropper component again. We can check it with chrome performance monitor.
Be carefull when you put base64 image to angular change detection dom. It overload CPU each angular tick.