[Bug]: canvas not show up upon editing the pose

[jaksonlin]

Is there an existing issue for this?

• I have searched the existing issues and checked the recent builds/commits of both this extension and the webui

What happened?

in sd-webui controlnet click edit to edit the pose, the canvas not show up

Steps to reproduce the problem

1. Go to control net
2. Upload an image and check preview and use preview as input
3. click edit to edit the pose detected

What should have happened?

the canvas show up corretly with pose passed in.

Commit where the problem happens

webui:
version: v1.3.2  •  python: 3.10.6  •  torch: 2.0.0+cu118  •  xformers: N/A  •  gradio: 3.32.0  •  checkpoint: fc2511737a

controlnet: v1.1.224
openpose-editor: 0.16 (f2d5aac5)

What browsers do you use to access the UI ?

edge

Command Line Arguments

webui-user.bat

Console logs

localhost/:16  Uncaught SyntaxError: Unexpected token '{'
vue-i18n.esm-bundler.js:39  You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
initFeatureFlags @ vue-i18n.esm-bundler.js:39
App.vue:287  Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'split')
    at parseDataURLtoJSON (App.vue:287:24)
    at Proxy.loadCanvasFromFrameMessage (App.vue:891:28)
    at App.vue:484:14

Browser logs

Additional information

going through some debug in vscode , the broken is caused by backgroundColor set in here,

      this.canvas = markRaw(new fabric.Canvas(<HTMLCanvasElement>this.$refs.editorCanvas, {
        backgroundColor: '#222222',
        preserveObjectStacking: true,
        fireRightClick: true,
        stopContextMenu: true,
      }));

and there is an error :Background color of canvas instance. Should be set via fabric.StaticCanvas#setBackgroundColor .

according to the error, the issue is fixed by pulling the config out and pass by variable:

  const config = {
          backgroundColor: '#222222',
          preserveObjectStacking: true,
          fireRightClick: true,
          stopContextMenu: true,
        }
      this.canvas = markRaw(new fabric.Canvas(<HTMLCanvasElement>this.$refs.editorCanvas, config));

and then the npm run dev server show the default pose correctly and sd-webui can render the canvas without error

[huchenlei]

I don't think this is a canvas setting issue. The stacktrace shows that the dataURL received from ControlNet is having some problem.

function parseDataURLtoJSON(dataURL: string): any {
  const data = dataURL.split(',')[1]; // Extract the data portion <--- dataURL is undefined
  const decodedData = atob(data); // Decode the data
  const json = JSON.parse(decodedData); // Parse the decoded data as JSON
  return json;
}

I am going to add some error handling on the incoming frame message so that user knows what happens.

Also, can you share the image that triggers this issue?

[huchenlei]

Closing for inactivity.