Closed figuerres closed 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.
fixed with latest commit
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?
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 ??