webfactorymk / ng2-canvas-whiteboard Goto Github PK

Hi,
it seems that the canvas use the object-fit: cover to show the image. There is a way to use the object-fit: contain?

Thanks in advance.

How can i increase drawing pencil size

Hi!
When the drawing is started, the shape FreeHandShape is selected by default.
How to make a different shape by default?

Saving the canvas image works fine when there is no imageUrl, but I need to use an image from another server on our network. When trying to save the canvas, I get a DOMException: "The operation is insecure."

The error is to be expected because the image taints the canvas, and it isn't secure to just save it.

It looks like the solution involves something along these lines (taken from here)

function startDownload() {
  let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
 
  downloadedImg = new Image;
  downloadedImg.crossOrigin = "Anonymous";
  downloadedImg.addEventListener("load", imageReceived, false);
  downloadedImg.src = imageURL;
}

Is there something like this already that I am missing, or is this a feature request to provide an option to do this?

Are you planning to add line drawing patterns support?

Hi,
I have created a bootstrap modal window and used ng2-canvas whiteboard. Here I am able to draw at chrome, but I could not able to draw at IE. Could you please help me out how to resolve my issue..

Awesome code - Reading through the documentation - there doesn't seem to be an output event for when the save button is pressed - should one be added?

In the example they attach the saving technique to the undo event but this probably isnt the best place to do this.

Technically it sounds easy, as described at https://stackoverflow.com/questions/18377891/how-can-i-let-user-paste-image-data-from-the-clipboard-into-a-canvas-element-in

I am not sure if this is in the scope of this component.

Hi,

Having a scaling mode for the image would be nice, similar to the ones available on android e.g.
https://developer.android.com/reference/android/widget/ImageView.ScaleType

Hi, I use Angular CLI: 7.0.1 and Angular: 7.0.0.

When executing: ng serve -o

ERROR in src / .... module.ts (9,40): error TS2307: Cannot find module 'ng2-canvas-whiteboard/index'.

Please help.

Works all fine in Dev Mode
But in Production Mode, Shapes are Selectable but still draw in strokes mode.

-> ng build --base-href=/ --prod --aot --build-optimizer --vendor-chunk=false --optimization

Hi,

I am using this canvas for my uploaded image. I can draw different pattern using ng2-canvas-whiteboard. But my doubt is how can i save the draw pattern. And how can i retain the drawn pattern to image using mysql or mongodb. What value i need to save for drawn pattern

Please help!!

How i can Fill canvas with dynamic color

Dear @Peshou ,

is it possible to use rxjs 6 instead of rxjs 5 for this package? Currently, if you want to use rxjs 6 you will need to add the compat lib.. Wouldn't it be better to use rxjs 6 as default and use a compat in case someone needs to use it with rxjs 5 instead? because sooner or later one will need to switch to rxjs 6.

what do you think on this?

All the best and cheers,

Hi,

Do you have any plans in the immediate future to add pre-made shapes to the library?

Thanks!

How can I use the coordinates produced by the OnBatchUpdate event, to replicate/update the board on another browser?

Are you planning to add text drawing support?

Good morning,

Thanks a lot for for your great project. We implemented your ng2-canvas-whiteboard into our application and everythings works fine, but we would appreciate to have some additional styling options.

Unfortunately, we cannot control the color pickers. We would like to change their text or use icons for them. The options object does not have attributes for that.

Moreover, we would like to have the possibility that the color-pickers are not shown. For example, when we set the "shapeSelectorEnabled" attribute to false in order to achieve that the consumer can only use lines then the "Fill" color-picker should not be displayed.

Do you intent to include such features?

I want to be able to set the imageUrl to a base64 String, but I am only getting

compiler.js:7275 Uncaught Error: Quotes are not supported for evaluation!

i am not able to create new drawing, cant understand how to achieve it

This service can be used to push new actions that the canvas should invoke (drawing, clearing, undo/redo etc).
The current implementation will not be removed.
A more reactive approach will be used throughout the canvas component.

Hi, I am using ng2-canvas-whiteboard for painting on an image however If I paint it then I can not see the image. Actually what I want to do is to make the color transparent.

I tried to add opacity in your createColorPalette function.. however it is not working as intended.
I tried to edit this function

CanvasWhiteboardColorPickerComponent.prototype.createColorPalette = function() { var gradient = this._context.createLinearGradient(0, 0, this._context.canvas.width, 0); gradient.addColorStop(0.6, "rgb(255,0,0 , 0.3)"); gradient.addColorStop(0.15, "rgb(255,0,255, 0.3)"); gradient.addColorStop(0.33, "rgb(0, 0, 255, 0.3)"); gradient.addColorStop(0.49, "rgb(0, 255, 255, 0.3)"); gradient.addColorStop(0.67, "rgb(0, 255, 0, 0.3)"); gradient.addColorStop(0.84, "rgb(255, 255, 0, 0.3)"); gradient.addColorStop(1, "rgb(255, 0, 0, 0.3)"); this._context.fillStyle = gradient; this._context.fillRect(0, 0, this._context.canvas.width, this._context.canvas.height); gradient = this._context.createLinearGradient(0, 0, 0, this._context.canvas.height); gradient.addColorStop(0, "rgba(255, 255, 255, 1, 0.3)"); gradient.addColorStop(0.5, "rgba(255, 255, 255, 0, 0.3)"); gradient.addColorStop(0.5, "rgba(0, 0, 0, 0, 0.3)"); gradient.addColorStop(1, "rgba(0, 0, 0, 1, 0.3)"); this._context.fillStyle = gradient; this._context.fillRect(0, 0, this._context.canvas.width, this._context.canvas.height); };

can you please tell me how can I achieve that?

Hi

I am using version 2.0.2.

Is it possible to "re-load" a saved CanvasDataUrl (received using generateCanvasDataUrl()) at a later point?

Or more specific: when the user presses the save-button, we store the CanvasDataUrl. At a later point it should be possible to come back to this drawing and edit it further (it is not needed to undo steps done before the saving).
Is this currently possible to achieve?

Thanks,
Stefan

In many simple image editors, there is a feature of typing content/letterd.

Is this in the scope of this component in near future?

Hi,
there is a way to go in canvas without draw button enabled but drawing enabled. So the user doesn't must click the draw button to start the draw.

Thanks in advance.

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);

Hi,

First of all great works.

Secondly I have a question: my use case requires me to save the drawings as a list of history as oppose to an image or a blob. Do you think its an acceptable idea to expost _updateHistory in canvas-whiteboard.component?

Thanks!

It would be nice if we have input param for leaving the canvas background transparent instead of setting default color.

Hi!
I am trying to unregister FreeHandShape, LineShape, SmileyShape, StarShape in the service:

draw.component.ts

import { Component, OnInit } from '@angular/core';
import { 
  CanvasWhiteboardComponent, CanvasWhiteboardOptions, 
  CanvasWhiteboardService, CanvasWhiteboardShapeService, 
  CircleShape, FreeHandShape, LineShape, RectangleShape, SmileyShape, StarShape
} from 'ng2-canvas-whiteboard';

@Component({ ... })
export class DrawComponent implements OnInit {

  private canvasOptions: CanvasWhiteboardOptions;

  constructor(private _canvasWhiteboardService: CanvasWhiteboardService, private _canvasWhiteboardShapeService: CanvasWhiteboardShapeService) { 
    _canvasWhiteboardShapeService.unregisterShapes([CircleShape, FreeHandShape, LineShape, RectangleShape, SmileyShape, StarShape]);
  }

  ngOnInit() {
    this.canvasOptions = { ... };
  }

CircleShape and RectangleShape unregistered successfully.
For the rest I get an error:

"export 'FreeHandShape' was not found in 'ng2-canvas-whiteboard'
"export 'LineShape' was not found in 'ng2-canvas-whiteboard'
"export 'SmileyShape' was not found in 'ng2-canvas-whiteboard'
"export 'StarShape' was not found in 'ng2-canvas-whiteboard'

There is no export of these shapes in the ng2-canvas-whiteboard.ts. Maybe this is the reason?

Here is my repository: https://github.com/oduvanka/test-draw/tree/unregister-error

Will be fixed in version 1.1.1

Good morning.

The implementation has been a success. Thank you for your contribution.
But we were presented with an inconvenience when we loaded the application by means of table.
We experience undefined strokes when taking a signature.
This also happens in PC but when we write fast with the mouse.

How can I optimize the writing stroke?

This is a follow-up to issue 29. It appears that any time an image is loaded into the canvas from the base64 encoding, the Clear, Undo, (and presumably Redo) buttons no longer work. Obviously it should not clear any old work, but when the canvas with the image is loaded, then a new line or shape is drawn onto the canvas, pressing Clear or Undo should remove that new line or shape. Currently, nothing happens (I don't see any errors, but the last action is not removed).

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 would be nice to have a possibility to provide the file name as a param.

The canvas currently has FreeHand, Line, Rect, Circle, Star (5 spikes), Smile shapes.

It will be good if more shapes are inserted and are available out of the box, and if someone does not want a particular shape he can easily unregister it from the service.

Would be nice.

The string given in imageUrl, should that be a encode base64 or simply just a path to the image? etc etc.

Currently, when I leave the canvas (but have the mouse still pressed) and enter it again the line has stopped. This feels a little odd sometimes and I would like to change this behavior.

Hello,

I have updated my project to Angular 9 and this package to the latest version (3.0.4 at this time).
After including the module in my AppModule imports, adding the CanvasWhiteboardComponent to the viewProviders and including the code below I got an error.

<canvas-whiteboard
    #canvasWhiteboard
    [drawButtonClass]="'drawButtonClass'"
    [drawButtonText]="'Draw'"
    [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"
    (onBatchUpdate)="sendBatchUpdate($event)"
    (onClear)="onCanvasClear()">
</canvas-whiteboard>

The error I get when this initializes:

Hi,
I added 'CanvasWhiteboardModule' in app.module.ts. And canvas is used in one of my component. But when use

ng serve --aot

I am getting following error.

ERROR in Unexpected value 'CanvasWhiteboardModule in C:/projectfFolder/node_modules/ng2-canvas-whiteboard/dist/ng2-canvas-whiteboard.d.ts' imported by the module 'AppModule in C:/projectfFolder/src/app/app.module.ts'. Please add a @NgModule annotation.

i domt why i am getting this error. Please suggest

Module not found: Error: Can't resolve 'rxjs/Subject' in '\node_modules\ng2-canvas-whiteboard\dist'.

Please help.

@angular/cli": "~6.0.5"

Hi @Peshou and community,

first of all, I would like to thank you for this package. I am considering using this package in my project. Great work so far.

However, when using the package, I stumbled upon an issue, as I am using whiteboard with css transform: scale(...):

The problem is as follows: If you scale the whiteboard (or an HTML element that surrounds it) by applying transform: scale(...) the line is not drawn at the correct position. This is, because the mouse position is absolute. But the lines are drawn on the image with the original size first and then the whole canvas is scaled (e.g., if you want to draw on 50/50 but you scale it down by 0.5, you should draw at 100/100).

Maybe you could add a scaleFactor that allows for this feature?

The solution that worked for me is as follows:

let xPos;
let yPos;
if (event) {
    // FireFox
    xPos = event.pageX;
    yPos = event.pageY;
} else {
    // IE
    const windowEvent = window.event as any;
    xPos = windowEvent.x + document.body.scrollLeft - 2;
    yPos = windowEvent.y + document.body.scrollTop - 2;
}

// Set position relative to canvas' top and left offset
const boundingRect = this._canvas.getBoundingClientRect();
xPos -= boundingRect.left;
yPos -= boundingRect.top;

// Reset scale made from css transform-scale, to get mouse position relative to actual canvas size
const scaleWidth = boundingRect.width / this._canvas.width;
const scaleHeight = boundingRect.height / this._canvas.height;
xPos /= scaleWidth;
yPos /= scaleHeight;

return {
    x: xPos,
    y: yPos
}

The important part would be:

// Reset scale made from css transform-scale, to get mouse position relative to actual canvas size
const scaleWidth = boundingRect.width / this._canvas.width;
const scaleHeight = boundingRect.height / this._canvas.height;
xPos /= scaleWidth;
yPos /= scaleHeight;

Whereas, this._canvas is the actual CanvasHTMLElement.

If you use the mentioned solution with the Input() scaleFactor, you can probably replace scaleWidth and scaleHeight with this scaleFactor. I guess the factors for width and height should be equal anyway, otherwise the content may be streched.

If I’m understanding your code correctly the changes would be in the method _getCanvasEventPosition in the file canvas-whiteboard.component.ts.

Thank you in advance for your time and effort,
Cheers

Will be fixed in version 1.1.2

Should fix error: Error: BrowserModule has already been loaded.

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.

Hi,
I'm facing a weird issue, not sure if it concerns the package or not, but i'm stating it anyway, i'm using the canvas context to fill the canvas with some text after it loads, with a custom font, on Firefox it works perfectly as i want it, but on Chrome / Opera it load with default fault (Arial i guess) and after i click on the Clear button (I made it rewrite the text on the Onclear event) it loads with the correct font, here are my codes :
` ngAfterViewInit() {
setTimeout(() => {
this.canvas.changeColor("#000000");
this.context = this.canvas.context;
this.onCanvasClear();
}, 250);

} onCanvasClear() {
this.drawPaperFormat();
} drawPaperFormat() {
this.context.lineWidth = 1;
this.context.strokeStyle = "gray";
for (var i = 0; i <= 1000; i += 10) {
this.context.moveTo(i, 0);
this.context.lineTo(i, 1000);
this.context.moveTo(0, i);
this.context.lineTo(1000, i);
}
this.context.stroke();
this.context.font = "100px Arabic-Dots";
this.context.fillText(this.canvasRef.nativeElement.getAttribute("content"), 100, 100);
}`

Any ideas ?
I have another issue, not sure if i should create another ticket or not, but when i resize the browser the grids i draw using the DrawPaperFormat() are cleared and so is the contents, i added an angular listener to the resize event and have the drawPaperFormat() executed when the window resize, but it doesn't, any idea ? Thank you in advance