_loadImage() to public

[kochax]

Would be nice to have a possibility to load image after the canvas is initialized. One of these options would be good to have:

1. canvasWhiteboardComp.imageUrl = image;
   canvasWhiteboardComp.loadImage();
   

2. or simply
   canvasWhiteboardComp.loadImage(image);

[Peshou]

Hi @kochax,

I am not really sure how you intend to use this functionality.

The _loadImage is private and it's executed whenever the imageUrl is changed (in the ngOnChanges method). This is why the image will always be redrawn if changed (along with some missing updates) and there would be no need to call this method manually.

If you could perhaps explain me your use case, we may be able to work out some alternative, but for now i do not think there will be any need to allow access to this method.

Best,
Stefan

[kochax]

@Peshou Thank you for the fast response.

I just can confirm that there is ngOnChanges check for image url changes, but logs that I have put, never occurs.

Simply calling _loadImage worked fine:

this.canvasWhiteboard.imageUrl = someBase64;
this.canvasWhiteboard['_loadImage()']; // :)

Without the second line, does not work.

[Peshou]

Okay let me look into this since it may be some kind of bug if the method is not being invoked

[Peshou]

Could you try to edit the canvas component directly or make a canvas options object which is linked to the component itself?

Example:

 <canvas-whiteboard [imageUrl]="someBase64">
    </canvas-whiteboard>

Or

 <canvas-whiteboard [options]="options">
    </canvas-whiteboard>

options: CanvasWhiteboardOptions = {
};

then somewhere in the code

this.options.imageUrl=someBase64;

Your issue seems to occur when manually changing the input value without letting angular check for changes. Because of this, thengOnChanges method won't register input changes so the redraw code won't execute. I think the second solution with the options object should help you with your issue and it should be a bit cleaner for other inputs you may wish to change.

[kochax]

The example I posted, was directly editing of canvasComponent instance property, the solution that you proposed also didn`t work for me. Here is the example:

<canvas-whiteboard #canvasWhiteboard [options]="canvasOptions" (onBatchUpdate)="onCanvasDraw($event)"></canvas-whiteboard>

Options:

this.canvasOptions = { strokeColor: 'rgb(255, 255, 255)', lineWidth: 5, drawButtonEnabled: false, clearButtonEnabled: false, undoButtonEnabled: false, redoButtonEnabled: false, saveDataButtonEnabled: false, colorPickerEnabled: false, shouldDownloadDrawing: false, startingColor: 'transparent', drawingEnabled: false, showStrokeColorPicker: false, showFillColorPicker: false, shapeSelectorEnabled: false, showShapeSelector: false } as CanvasWhiteboardOptions;

And somewhere in the code:

this.canvasOptions.imageUrl = base64;

Nothing happened. I have tried to subscribe to onImageLoaded event before changing of the URL (also with callback), nothing resolved

[Peshou]

Okay, thanks, this is an issue and should be handled accordingly, since this is the correct way to change the imageUrl.

I will update the library with a patch version v2.0.4 and you should be able to have this functionality available.

In the meantime, I think that you can work out your problem by directly accessing the imageUrl input in the canvas without using the options object.

this.imageUrl = base64;

<canvas-whiteboard #canvasWhiteboard [imageUrl]="imageUrl" (onBatchUpdate)="onCanvasDraw($event)"></canvas-whiteboard>

Thanks for the observation and help. I will try to attend to this as soon as possible.

Best,
Stefan

[kochax]

I can live with that :)
Thank you for being ready to help,

Best Regards,
Jovan

[Peshou]

Yeah, and until I roll this fix out, you should download the 2.0.3 version of the canvas that I released today so that you can get the fix for the flicker that appears when you draw on a canvas with an image as background.

I'll try to tend to your issue really soon.

Best Regards,
Stefan