Load Saved "CanvasDataUrl" about ng2-canvas-whiteboard HOT 5 CLOSED

Yeah, if the canvas is not redrawn, then when dragging on premade shapes there will be an issue with multiple items being drawn instead of the dragged original. But when redrawing the canvas we need to redraw the image or the starting background.

The flicker occurs because of the loadImage method which is not synchronous, and I also found a problem where I'm not caching the downloaded image which results in a performance issue.

The new released version 2.0.3 should have this problem fixed where the image will not be downloaded again until it is changed and the canvas will only be redrawn with the new image and will not be cleared so the flicker won't occur.

Please check if the changes suit your issue, or maybe we need to do something else.

Best,
Stefan

from ng2-canvas-whiteboard.

Hi @sjucker,

Maybe this could be of some help to you.

When you save the image and get the url (maybe store it somewhere), if you want to draw on it you can try and set the imageUrl?: string as the canvas whiteboard input, and the content will be redrawn with that same image (there will be no draw history I think).

Please try it out and tell me how it works, if It's something you don't want we can probably work out some alternative and upgrade the canvas for that particular use case.

Cheers,
Stefan

from ng2-canvas-whiteboard.

Hi @Peshou

Thanks for your input.
We tried to set the imageUrl:

<canvas-whiteboard #canvasWhiteboard
                   [imageUrl]="'data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'"
                   [drawButtonEnabled]="false"
                   [clearButtonEnabled]="false"
                   [undoButtonEnabled]="false"
                   [redoButtonEnabled]="false"
                   [saveDataButtonEnabled]="false"
                   [showShapeSelector]="true">
</canvas-whiteboard>

The image is shown in the background, however when the user draws something on the canvas, the startingColor is also drawn, resulting in flickering between backgound image and startingColor. Could you please take a look as to why this is the case?

Thank you.

from ng2-canvas-whiteboard.

Tested with version 2.0.3: flickering is gone. Thank you for the quick fix!

from ng2-canvas-whiteboard.

No problem man,
Sorry for the inconvenience.

I will close the issue now and we can open a new one if a problem occurs

from ng2-canvas-whiteboard.