webfactorymk/ng2-canvas-whiteboard

Uploading img results in cropping much of it out.

Closed this issue · 2 comments

I'm trying to use this lib for changing imgs.

Yet when i update the imageUrl
this.canvasOptions.imageUrl = base64imgUrl;

it "zooms in" and crop out most of the image inside the canvas.
even with aspectRatio: 1 in options.

am i doing something wrong here?

Code.

init
ngOnInit() { setTimeout(() => { window.dispatchEvent(new Event('resize')); }, 1); this.imageUrl(this.incImageUrl); }

Options
canvasOptions: CanvasWhiteboardOptions = { drawButtonEnabled: false, drawButtonClass: 'drawButtonClass', drawButtonText: 'Drawing', drawingEnabled: true, clearButtonEnabled: true, clearButtonClass: 'clearButtonClass', clearButtonText: 'Clear', undoButtonText: 'Undo', undoButtonEnabled: true, redoButtonText: 'Redo', redoButtonEnabled: true, colorPickerEnabled: true, saveDataButtonEnabled: true, saveDataButtonText: 'Save', lineWidth: 5, strokeColor: 'rgb(0,0,0)', shouldDownloadDrawing: true, imageUrl: '', aspectRatio: 1 };

ImageUrl func.
imageUrl(base64imgUrl) { this.canvasOptions.imageUrl = base64imgUrl; }

It seems like the height of the image -> canvas it not set.

Fixed now.

Dynamic setting aspectRatio, by dividing the uploaded images YX and inserting that value into the aspectRatio.