Need to load the image inside canvas without chopping off

[eshwerintouch]

Hi team,

The library was very nice. But I see that the original image was chopped off on top and bottom.

I mean that the image width was completely fine but it was not covering the all content when it comes to height. Some of the contents on top and bottom of the image was deleted when it was on edit mode.

Please fix it OR let me know if there's any option to load it completely.

[eshwerintouch]

Even after giving AspectRatio = 0 the canvas still cut of some part of the image.

[Fridthjof]

Did you find somewhat of a solution?

i currently got the same issue.

[eshwerintouch]

@Fridthjof Nothing particularly. But I found out that if we give the container height and width same as the original image aspect ratio it loads up fine. As the high resolution images go out of the window if I try to give the same height dynamically by getting the original height now I do resize the image using ngx-pic as per my container width and load the image so I get the exact image.

[eshwerintouch]

@Fridthjof reference link where I have used the editor

[Fridthjof]

I Fixed it by dynamically setting aspectRatio, by dividing the uploaded image height and width and inserting that value into the aspectRatio option.

[eshwerintouch]

Yes we could do that but in my case I had the zoom event too in edit mode. But it was not showing completely if I create that way so. Can you please share the snippet incase if that works for my scenario too

On Wed, Oct 31, 2018, 8:33 PM Emil Fridthjof <[email protected] wrote:

I Fixed it by dynamically setting aspectRatio, by dividing the uploaded image height and width and inserting that value into the aspectRatio option.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/webfactorymk/ng2-canvas-whiteboard/issues/37#issuecomment-434720876, or mute the thread https://github.com/notifications/unsubscribe-auth/AqXe2Pyq_pG1aYv60-wOjx3A8ZmLOoq5ks5uqbu9gaJpZM4YBZCR .

[Fridthjof]

Sure.

Component that uses the lib.

imageUrl: null;
    filedUploaded = false;
    aspectRatio = null;

uploadImageUrl(event) {
        this.readImage(event.target);
    }

private readImage(inputValue: any): void {
        const file: File = inputValue.files[0];
        const myReader: FileReader = new FileReader();

        myReader.onloadend = (e) => {
            this.imageUrl = myReader.result; // Base64 encoding the image
        };
        myReader.readAsDataURL(file);

        const img = new Image();
        img.src = window.URL.createObjectURL(file);
        img.onload = (fn) => {
            this.aspectRatio = (img.naturalHeight / img.naturalWidth); // Calculation of the aspectRatio
            this.filedUploaded = true;
        };
    }

HTML.

<div *ngIf="filedUploaded && imageUrl">
       <div style="height: 50%; width: 50%">
            <app-image-editor
                            [incImageUrl]="imageUrl"
                            [incAspectRatio]="aspectRatio">
            </app-image-editor>
        </div>
 </div>

My image-editor lib

@Component({
    selector: 'app-image-editor',
    viewProviders: [CanvasWhiteboardComponent],
    templateUrl: 'image-editor.component.html',
    encapsulation: ViewEncapsulation.None
})

export class ImageEditorComponent implements OnInit {
    @Input() incImageUrl: string;
    @Input() incAspectRatio: number;

    canvasOptions: CanvasWhiteboardOptions;

    ngOnInit() {

        this.canvasOptions = {
            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: this.incImageUrl,
            aspectRatio: this.incAspectRatio
        };
     }
}

My image-editor HTML

<canvas-whiteboard #canvasWhiteboard
                   [options]="canvasOptions"
                   (onBatchUpdate)="sendBatchUpdate($event)"
                   (onClear)="onCanvasClear()"
                   (onUndo)="onCanvasUndo($event)"
                   (onRedo)="onCanvasRedo($event)"
                   (onSave)="onSave($event)"
                   (onImageLoaded)="check($event)">
</canvas-whiteboard>

[ashishvspl076]

@eshwerintouch @Fridthjof have u solved image chopping issue ? i am also facing this issue