enlcxx / angular2-resizing-cropping-image Goto Github PK

This looks very promising, but I cannot figure out how to use it with angular-cli.

As far as I can tell, no typings are provided? The error I get after importing the module with import { lyResizingCroppingImagesModule } from 'angular2-resizing-cropping-image'; is:

Cannot find module 'angular2-resizing-cropping-image'.

The contents of node_modules/angular2-resizing-cropping-image are:

index.js  index.js.map  package.json  README.md  resizing-cropping-images.js  resizing-cropping-images.js.map  resizing-cropping-images.scss

Can I use angular2-resizing-cropping-image plugin for cropping two images, one at a time??

Thank you for this wonderful plugin. Is there a way to configure the cropper to be round rather than square?

i am getting follwing issue when i am trying to use this module,
please help me to resolve this..

resizing-cropping-images.js:232 Uncaught ReferenceError: __decorate is not defined
at Object. (resizing-cropping-images.js:232)
at webpack_require (bootstrap f71b306…:52)
at Object. (index.js:5)
at webpack_require (bootstrap f71b306…:52)
at Object.146 (main.ts:11)
at webpack_require (bootstrap f71b306…:52)
at Object.138 (src async:7)
at webpack_require (bootstrap f71b306…:52)
at Object.298 (main.bundle.js:199)
at webpack_require (bootstrap f71b306…:52)
at webpackJsonpCallback (bootstrap f71b306…:23)
at main.bundle.js:1

Dear,

image cropping not working properly from ipad or iphone. crop selection goes top left corner.

Thanks

I am using the alyle-ui for image-cropping, and every thing is working perfectly fine. But, the resulting image has a small resolution. I have tried to change height and width in both css, and config part in main file. But, it resulted in occupying a huge portion of the screen. I want the cropping functionality to be shown in a small space, but the resulting image should have higher resolution. Is this possible. If yes, can you please help me with this issue.
Thank you.

Hi there. As if now, the cropper is accepting ".gif" format as well. I don't want that to happen. What should I do?

Hi builder,
I am very appreciate your work done with this Angular image cropping.
I have implemented your package to Angular with working on cropping feature but I don't know to apply upload function to server after cropped. I can't find the file new file of cropped image to upload.
My project is Angular 11 I want to upload the cropped image to my server via API (Django RESTFramework).

Can you give me the guideline or any example of code to make it done?
The attachment is snap from error.

I am looking forward to see your replying

Hi,
really enjoyed using your plugin.
could you please to give a bit information about following?

1. how can I use 'cropping' within component, I mean not only in templates?
   For example I would like to wrap cropping.fit() with my own function:
   Something like this:
   someMethod () { //do somthing; this.cropping.fit() }
2. Is there any possibility to reduce step of zoomIn/zoomOut?
3. Is there any possibility to limit the output of the picture beyond the borders of ly-img-container?
4. Is there any possibility to put a picture 'fit to screen' as initial(default)?

Thanx again and looking forward to your replay

I have been using angular2-resizing-cropping-image for quite a while. According to the demo, the selected image can be "zoomed-out" until it reaches the configurations specified for the cropping window(as given below).

What if I want to zoom-out further, without changing the "myConfig" settings? I hope you understand my question. If there is a solution please let me know. Thank you. Good work by-the-way.

install with
npm install angular2-resizing-cropping-image
use with angular-cli
`import { NgModule } from '@angular/core';
import { lyResizingCroppingImagesModule } from 'angular2-resizing-cropping-image';
import { ImageUploadComponent } from './image-upload.component';

@NgModule({
declarations: [
ImageUploadComponent
],
imports: [lyResizingCroppingImagesModule],
exports:[
ImageUploadComponent
],
providers: []
})
export class ImageUploadModule { }`

during compiling have reply:

ERROR in lyResizingCroppingImagesModule is not an NgModule

The image has to fit given height and width

Will you update plugin to Angular 4.0+ soon?

Hi,
I've added your Image Cropper to my project and implemented it almost identically than the example found in the documentation.

The difference is that instead of getting the image from an URL, I'm retrieving it from an input. Therefore i'm using the method selectInputEvent.

Everything works fine, except for one thing that is, as the title describes, once loaded the image, it is not centered.

I'm not sure if it's really a bug from the library or mine. This is what I get when i load an image in the cropper:

But when I interact with it, the image centers by itfelf. (The next image is after clicking the button to center the image)

I tried to force the centering using cropping.center() at triggering load. But it still behaves the same way.

Here is my code:

// Component
export class ImageCropperComponent implements AfterViewInit {
  classes = this.theme.addStyleSheet(styles);
  croppedImage?: string;
  result: string;
  scale: number;
  @ViewChild(LyImageCropper, { static: false }) cropper: LyImageCropper;
  @Input() image: any;
  @Output() imageCropped: EventEmitter<any> = new EventEmitter();
  @Output() close: EventEmitter<any> = new EventEmitter();
  myConfig: ImgCropperConfig = {
    autoCrop: false, // Default `false`
    width: 250, // Default `250`
    height: 250, // Default `200`
    fill: '#ff2997', // Default transparent if type = png else #000
    type: 'image/png' // Or you can also use `image/jpeg`
  };

  constructor(private theme: LyTheme2) {}

  ngAfterViewInit() {
    if (Platform.isBrowser) {
      const config = {
        scale: 0.745864772531767,
        position: {
          x: 642.380608078103,
          y: 236.26357452128866
        }
      };
      console.log(this.image, this.cropper);
      this.cropper.selectInputEvent(this.image);
    }
  }

  onCropped(e: ImgCropperEvent) {
    this.croppedImage = e.dataURL;
    this.imageCropped.emit(e.dataURL);
    console.log('cropped img: ', e);
  }
  onloaded(e: ImgCropperEvent) {
    console.log('img loaded', e);
  }
  onerror(e: ImgCropperErrorEvent) {
    console.warn(`'${e.name}' is not a valid image`, e);
  }

  closeCropper() {
    this.close.emit();
  }
}

// html

<div class="buttons-container" *ngIf="cropping.isLoaded">
  <button (click)="cropping.zoomIn()" ly-button appearance="icon">
    <ly-icon>zoom_in</ly-icon>
  </button>
  <button (click)="cropping.zoomOut()" ly-button appearance="icon">
    <ly-icon>zoom_out</ly-icon>
  </button>
  <button (click)="cropping.center()" ly-button appearance="icon">
    <ly-icon>filter_center_focus</ly-icon>
  </button>
  <button (click)="cropping.rotate(-90)" ly-button appearance="icon">
    <ly-icon>rotate_90_degrees_ccw</ly-icon>
  </button>
  <button (click)="cropping.fit()" ly-button>Fit</button>
  <button (click)="cropping.fitToScreen()" ly-button>Fit to screen</button>
  <button (click)="cropping.setScale(1)" ly-button>1:1</button>
  <button (click)="closeCropper()" ly-button>Close</button>
</div>

<ly-img-cropper
  [withClass]="classes.cropping"
  #cropping
  [config]="myConfig"
  [(scale)]="scale"
  (cropped)="onCropped($event)"
  (loaded)="cropping.center(); onloaded($event)"
  (error)="onerror($event)"
>
  <span>Drag and drop image</span>
</ly-img-cropper>

<div class="bottom">
  <div *ngIf="cropping.isLoaded" [className]="classes.range">
    <ly-slider
      [thumbVisible]="false"
      [min]="cropping.minScale"
      [max]="1"
      [(ngModel)]="scale"
      (input)="scale = $event.value"
      step="0.000001"
      [color]="'#000000'"
    ></ly-slider>
  </div>

  <button
    *ngIf="cropping.isLoaded"
    (click)="cropping.crop()"
    ly-button
    [color]="'#000000'"
  >
    <ly-icon>crop</ly-icon>crop
  </button>

  <div><img *ngIf="cropping.isCropped" [src]="croppedImage" /></div>
</div>

I am using that module in my app and I want to save cropped image which shown below the cropping window.Is there any way to save that cropped image or not...???

Hello! There is always fixed width and height of image 230x150.
I want to change it.

I thought importing ResizingCroppingImagesComponent in my component and I can change default values of that variables but when I did this, I got error:
No providers so I added it in providers in my module. Then I got error No providers for ElementRef.
How to solve this issue?
Please help me.

ng build --aot

ERROR in Unexpected value 'ResizingCroppingImagesComponent in /node_modules/angular2-resizing-cropping-image/resizing-cropping-images.component.d.ts' declared by the module 'AppBrowserModule in /src/app/app.browser.module.ts'. Please add a @Pipe/@Directive/@Component annotation.

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.browser.module.ngfactory' in 

it works without aot though. but we want aot...

Unexpected value 'LyResizingCroppingImageModule in node_modules/angular2-resizing-cropping-image/index.d.ts'. Please add a @NgModule annotation.

Hello, when I try to build my ng5 app with --prod flag I'm getting something like this:

ERROR in : Unexpected value 'LyResizingCroppingImageModule in /Users/username/Documents/projectname/node_modules/angular2-resizing-cropping-image/index.d.ts' imported by the module 'MyModule in /Users/username/Documents/software-projectname/src/app/my-module/MyModule.module.ts'. Please add a @NgModule annotation.

Could you update it or tell me how to fix it?

Can you tell me how to change the background color of the output image?