matheusdavidson / angular-cropperjs Goto Github PK
View Code? Open in Web Editor NEWCropperJS integration for Angular +6
License: MIT License
CropperJS integration for Angular +6
License: MIT License
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:
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?
MaccabeeY
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...
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.
Hi,
can you please remove the "console.log('this.cropperOptions', this.cropperOptions);" in the next version? :-)
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?
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
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 :-)
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
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?
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!
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.
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,
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.
checkCrossOrigin should be optional
https://github.com/fengyuanchen/cropperjs#checkcrossorigin
if (this.cropperOptions && this.cropperOptions.checkCrossOrigin) image.crossOrigin = 'anonymous';
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);
});
Any chance we could get the Angular peer dependencies upped to build with Angular 7+ without npm warnings?
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...
i store previous cropped data x , y and width and height. how to and where i set it to show crop box?tnx
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"
}
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,
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
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
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. :-)
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
It is a "bug" or is there a necessary code step required to avoid the creation of additional ".cropper-container" elements?
Thanks,
MaccabeeY
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..
});
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 ?
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?
Hi, do you have any plan to upgrade and keep the library always up to date? and do you need probably help?
thank you
// 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'.
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.
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 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
Hello, how could I put the circular border on the cropper?
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;">
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
I expected something like
this.angularCropper.cropper.onCropMove(function(event){console.log(event);});
to work. Is this at all supported?
Thanks.
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';
/**
@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;
}
}
Hello ,
How to Handel Image with Blob not Image URL ,also please there is no sample for this could any one provide some?
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!!
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;
}`
How can i implement 2 croppers in one page
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.
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)
Line 66 angular-cropper.js
//
// Add crossOrigin?
console.log('this.cropperOptions', this.cropperOptions);
if (this.cropperOptions.checkCrossOrigin)
image.crossOrigin = 'anonymous';
//
// Image on ready event
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.