search

cstefanache / angular2-img-cropper

Angular 2 Image Cropper
MIT License
364 stars 135 forks source link

corpper settings and responsive layout / bootstrap #130

Closed figuerres closed 7 years ago

figuerres commented 7 years ago

i think there needs to be an option to have the cropper fit the size of the parent container. for example if i use a bootstrap layout then a fixed size will not work well when the page is re-sized.

if we can make the canvas use a % size that might fix this ??

figuerres commented 7 years ago

here is part of what can fix this:

if the canvasWidth and Height are not set by the init code then do not set them on the canvas object at runtime. add a style to the canvas and the parent div of 100%

like this:

image cropper component .ts

selector: "img-cropper", template: <input *ngIf="!settings.noFileInput" type="file" (change)="fileChangeListener($event)" > <canvas #cropcanvas style="width:100%;height:100%;" (mousedown)="onMouseDown($event)" (mouseup)="onMouseUp($event)" (mousemove)="onMouseMove($event)" (mouseleave)="onMouseUp($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)" (touchstart)="onTouchStart($event)"> ` and ngAfterViewInit():void { let canvas: HTMLCanvasElement = this.cropcanvas.nativeElement;

    if (!this.settings) {
        this.settings = new CropperSettings();
    }

  //  this.renderer.setElementAttribute(canvas, "width", this.settings.canvasWidth.toString());
  //  this.renderer.setElementAttribute(canvas, "height", this.settings.canvasHeight.toString());

    if (!this.cropper) {
        this.cropper = new ImageCropper(this.settings);
    }

    this.cropper.prepare(canvas);
}`

then my app can set the bootstrap panel size and the canvas fits the area based on the actual size at runtime. resizing the browser window makes the canvas adjust.

if i have time i can try to help with the logic , let me know what you think of the idea.

cstefanache commented 7 years ago

fixed with latest commit

oztek22 commented 7 years ago

I want to keep dimension of canvas dynamic. if(some condition){ this.cropperSettings2.canvasWidth = 228; this.cropperSettings2.canvasHeight = 228; } else{ this.cropperSettings2.canvasWidth = 500; this.cropperSettings2.canvasHeight = 400; } can you give an example of how this work?