search

carstenschaefer / DrawerJs

A customizable WYSIWYG HTML canvas editor.
https://www.drawerjs.com
MIT License
556 stars 113 forks source link

"TypeError: Cannot read property 'loadFromJSON' of undefined" #40

Closed naveenkumarmark closed 5 years ago

naveenkumarmark commented 5 years ago

Hi All, I am saving the drawn item to local storage and rendering the canvas of the html page when the page is reloaded. `
saveDrawing () { var serializedData = window.drawer.api.getCanvasAsJSON(); var res = JSON.stringify(serializedData) if (res) localStorage.setItem('canvas', res) },

 loadDrawing () {
    var parseData = JSON.parse(localStorage.getItem('canvas'))
   window.drawer.api.loadCanvasFromData(parseData)
 }

` I get the exceptions saying TypeError: Cannot read property 'loadFromJSON' of undefined at DrawerConstructor.Drawer.loadCanvas (drawerJs.standalone.js:29762) at DrawerApi.loadCanvasFromData (drawerJs.standalone.js:27517) at VueComponent.loadDrawing (DrawTool.vue?fd05:304) at VueComponent.mounted (DrawTool.vue?fd05:248) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at callHook (vue.runtime.esm.js?2b0e:4213) at Object.insert (vue.runtime.esm.js?2b0e:3139) at invokeInsertHook (vue.runtime.esm.js?2b0e:6340) at Vue.patch [as patch] (vue.runtime.esm.js?2b0e:6559) at Vue._update (vue.runtime.esm.js?2b0e:3939)

How to fix this?

extremeCrazyCoder commented 5 years ago

I am getting the same error when loading the data that way it seems that you have to start the editing before you can load the data that way....

it works if I write the loading that way:

    function loadDrawing () {
        var parseData = JSON.parse(localStorage.getItem('canvas'))
        window.drawer.api.startEditing();
        window.drawer.api.loadCanvasFromData(parseData)
        window.drawer.api.stopEditing();
    }
extremeCrazyCoder commented 5 years ago

If you don't need to load / save throught the api you should do it that way:

                saveCanvasData: function(canvasId, canvasData) {
                    console.log("save");
                    localStorage.setItem('canvas_', JSON.stringify(canvasData));
                },
                loadCanvasData: function(canvasId) {
                    console.log("load");
                    return JSON.parse(localStorage.getItem('canvas_'));
                },

see https://github.com/carstenschaefer/DrawerJs/wiki/Loading-and-Saving#saving-data-using-a-custom-function but be aware that there is an error in the example code. You need to do JSON.parse before returning

naveenkumarmark commented 5 years ago

@extremeCrazyCoder thanks it worked.

naveenkumarmark commented 5 years ago

@extremeCrazyCoder I have a doubt in saving/loading canvas with image and background image. I could not save canvas with image or background image by my above method saveDrawing (). Do I need to consider this to save canvas with images? contentConfig: { saveAfterInactiveSec: 5, saveInHtml: false, imagesContainer: '#drawer-canvas-images-container', canvasDataContainer: '#drawer-canvas-data-container' }

or API method

function onSaveImage() { window.drawer.api.saveCanvas(); }

extremeCrazyCoder commented 5 years ago

I don't know if understand that correctly, but with the above function saveDrawing() you store serialized object data with that you can restore all objects afterwards as far as I have tested this works (if not could you please provide an example?)

if you want to store a png you need to use window.drawer.api.getCanvasAsImage() and format it afterwards since its base64 encoded for usage in src of img tags

naveenkumarmark commented 5 years ago

@extremeCrazyCoder thanks for your response, the above method saveDrawing () works fine, I did not check thoroughly.

I face issues on loading canvas with this method loadDrawing () { var parseData = JSON.parse(localStorage.getItem('canvas')) window.drawer.api.startEditing() window.drawer.api.loadCanvasFromData(parseData) window.drawer.api.stopEditing() }

I get exception sometime like this when I load canvas with image and background image canvas it.

drawerJs.standalone.js:33618 Uncaught TypeError: Cannot read property 'find' of null at DrawerToolbarManager._removeHelperElements (drawerJs.standalone.js:33618) at DrawerToolbarManager._createHelperElements (drawerJs.standalone.js:33630) at DrawerToolbarManager.createAllToolbars (drawerJs.standalone.js:33457) at DrawerConstructor.Drawer.onCanvasLoaded (drawerJs.standalone.js:29852) at drawerJs.standalone.js:29775 at drawerJs.standalone.js:11184 at cbIfLoaded (drawerJs.standalone.js:11212) at drawerJs.standalone.js:11243 at klass.setElement (drawerJs.standalone.js:18495) at klass._initElement (drawerJs.standalone.js:18866)

Note: If I refresh the page the canvas loads correctly without this issue

extremeCrazyCoder commented 5 years ago

I am sorry, but i cannot really tell why this is crashing there. It looks as if the this.drawerInstance.$canvasEditContainer is sometimes null, but this should not happen since startEditing sets this variable...

That it is only crashing sometimes doesn't really helps either.You should really do this via contentConfig

naveenkumarmark commented 5 years ago

@extremeCrazyCoder, thanks for being passionate with this. It is not crashing always but sometimes the background image takes time to load which causes this issue. I will do some work around on contentConfig.

edfrommathclass commented 3 years ago

@extremeCrazyCoder, thanks for being passionate with this. It is not crashing always but sometimes the background image takes time to load which causes this issue. I will do some work around on contentConfig.

Hi Naveen, did you ever figure this out?? I'm encountering the same issue