Comments (5)
Hi, maybe the stringification/parsing is not correct, or maybe we should open an issue.
In the meantime, I created a sample demo in which I could save the updates to the session storage, and have a different button to load them, parse them and apply them to the canvas, which seemed to work, so maybe you can try it out and tell me if it helps with your use-case.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
@ViewChild(CanvasWhiteboardComponent) canvasWhiteboardComponent: CanvasWhiteboardComponent;
constructor(private canvasWhiteboardService: CanvasWhiteboardService) {
}
saveToStorage(): void {
// Get the current full update history
const updates: Array<CanvasWhiteboardUpdate> = this.canvasWhiteboardComponent.getDrawingHistory();
// Stringify the updates, which will return an Array<string>
const stringifiedUpdatesArray: Array<string> = updates.map(update => update.stringify());
// Stringify the Array<string> to get a "string", so we are now ready to put this item in the storage
const stringifiedStorageUpdates: string = JSON.stringify(stringifiedUpdatesArray);
// Save the item in storage of choice
sessionStorage.setItem('canvasWhiteboardDrawings', stringifiedStorageUpdates);
}
loadFromStorage(): void {
// Get the "string" from the storage
const canvasDrawingsJson: string = sessionStorage.getItem('canvasWhiteboardDrawings');
// Null check
if (canvasDrawingsJson != null) {
// Parse the string, and get an Array<string>
const parsedStorageUpdates: Array<string> = JSON.parse(canvasDrawingsJson);
// Parse each string inside the Array<string>, and get an Array<CanvasWhiteboardUpdate>
const updates: Array<CanvasWhiteboardUpdate> = parsedStorageUpdates.map(updateJSON =>
CanvasWhiteboardUpdate.deserializeJson(updateJSON));
// Draw the updates onto the canvas
this.canvasWhiteboardService.drawCanvas(updates);
}
}
}
from ng2-canvas-whiteboard.
Hi, can you double check that you are correctly saving and serializing the data in the sessionStorage (most probably via JSON.stringify and JSON.parse).
Be sure that you have the data you want to draw available, maybe the objects you are reading are null/undefined. Console.log them before invoking the draw method.
Also, Maybe there is a boolean property that was not serialized/parsed correctly so that's why there is an error.
Try it out and tell me the results
from ng2-canvas-whiteboard.
I have used an array to store all the updated from the canvas, did JSON.stringify([Array of updates]) while storing the items to the session storage.
While fetching the data from the storage; I get the desired data (type of object) before invoking the draw method.
log of the data on the console before invoking the data:
[100 … 199] 100: Array(1) 0: UUID: "f6e1386c-22b6-ee31-867f-fb6bdfafbb57" type: 1 x: 0.2773687900641026 y: 0.32374118338557994 __proto__: Object length: 1 __proto__: Array(0) 101: Array(1) 0: UUID: "f6e1386c-22b6-ee31-867f-fb6bdfafbb57" type: 1 x: 0.26775340544871795 y: 0.3253085815047022 __proto__: Object length: 1 __proto__: Array(0) 102: [{…}]
but the error is still the same
from ng2-canvas-whiteboard.
thanks a ton. It worked perfectly
from ng2-canvas-whiteboard.
the saving and loading method works fine for the initial time. when we close the whiteboard and reopen it, add some more drawing data to the canvas. the following error occurs while re-saving the data to the session storage. also, the save functionality does not work after re-opening the whiteboard component.
whiteboard-canvas.component.html:7 ERROR TypeError: this.x.toFixed is not a function at CanvasWhiteboardUpdate.stringify (ng2-canvas-whiteboard.js:61) at whiteboard-canvas.component.ts:39 at Array.map (<anonymous>) at WhiteboardCanvasComponent.saveToStorage (whiteboard-canvas.component.ts:39) at Object.handleEvent (whiteboard-canvas.component.html:7) at handleEvent (core.js:46169) at callWithDebugContext (core.js:47826) at Object.debugHandleEvent [as handleEvent] (core.js:47435) at dispatchEvent (core.js:31513) at core.js:45091 View_WhiteboardCanvasComponent_0 @ whiteboard-canvas.component.html:7 logError @ core.js:47740 handleError @ core.js:6281 dispatchEvent @ core.js:31517 (anonymous) @ core.js:45091 (anonymous) @ platform-browser.js:963 invokeTask @ zone-evergreen.js:399 onInvokeTask @ core.js:41621 invokeTask @ zone-evergreen.js:398 runTask @ zone-evergreen.js:167 invokeTask @ zone-evergreen.js:480 invokeTask @ zone-evergreen.js:1621 globalZoneAwareCallback @ zone-evergreen.js:1647 whiteboard-canvas.component.html:7 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 7, nodeDef: {…}, elDef: {…}, elView: {…}}
from ng2-canvas-whiteboard.
Related Issues (20)
- Not working in Angular 9 HOT 2
- Border-left invisible on Chrome when navigator fullscreen
- the drawn lines move a bit (+/-2px) when mouse click is released, is it intended ?
- Change stroke and fill texts HOT 2
- Cannot find name 'CanvasWhiteboardOptions'. HOT 1
- cannot upload any image to the whiteboard HOT 2
- Options to remove Fill and shapes HOT 4
- Clear canvas from another funciton
- Allow Ploygon Shape in Canvas
- ERROR TypeError: this.x.toFixed is not a function at CanvasWhiteboardUpdate.stringify (ng2-canvas-whiteboard.js:61) HOT 1
- Hi, how do i stop the pulsating on the draw button? And can i use an icon instead for the button HOT 5
- Option to import and edit the saved canvas
- (FIX FOR ERROR TypeError: this.x.toFixed) Saving and Reloading without edit Doubles the length of the updates array HOT 1
- how can we add text canvas and formatting(bold,underline,resize). HOT 1
- Example code for WebRTC
- capture the image as you draw HOT 1
- Fill Stroke Clear Button Panel Issue
- Low image resolution HOT 1
- Unable to move freehand drawing and Needed an Text editor
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng2-canvas-whiteboard.