add background

js/poseMaker.js

@@ -1,6 +1,7 @@
 console.log("hello from poseEditor.js")
 var canvas = null;
 var ctx = null;
+var canvasBg = null;
 
 const wheelDisplayTime = 500;
 
@@ -176,6 +177,12 @@ function clearCanvas() {
   ctx.fillRect(0, 0, w, h);
 }
 
+function drawBackground() {
+  if (canvasBg != null) {
+    ctx.drawImage(canvasBg, 0, 0);
+  }
+}
+
 function resizeCanvas(width, height) {
   canvas.width = width ? width : canvas.width;
   canvas.height = height ? height : canvas.height;
@@ -347,6 +354,7 @@ function drawUI() {
 
 function Redraw() {
   clearCanvas();
+  drawBackground();
   drawBodyPose();
   drawUI();
 }
@@ -554,6 +562,8 @@ function handleMouseUp(event) {
 
 function handleMouseLeave(event) {
   mouseCursor = [-1,-1];
+  handleMouseUp(event);
+  keyDownFlags = {};
 }
 
 function ModifyDragRange(delta) { dragRange = Math.max(dragRangeDelta, Math.min(512, dragRange + delta)); }
@@ -792,3 +802,12 @@ function savePose() {
 
   return jsonData;
 }
+
+function importBackground(image) {
+  let m = new Image();
+  m.src = image;
+  m.onload = function() {
+    canvasBg = m;
+    Redraw();
+  }
+}

main.py

@@ -18,7 +18,6 @@ def image_changed(image):
   else:
     print("pose not found")
     pose_result, returned_outputs = infer(util.pil2cv(image))
-    print(len(pose_result))
 
     candidate = []
     subset = []
@@ -32,20 +31,12 @@ def image_changed(image):
         candidate.extend(util.convert_keypoints(keypoints))
         m = len(candidate)
         subset.append([j for j in range(n, m)])
-    print("=====")
-    print(candidate)
-    print(subset)
 
     jsonText = "{ \"candidate\": " + util.candidate_to_json_string(candidate) + ", \"subset\": " + util.subset_to_json_string(subset) + " }"
-    print(jsonText)
     return f"""{image.width}px x {image.height}px, {len(subset)} indivisual(s)""", jsonText
 
-
-
-    return draw(image, pose_result)
-
 html_text = f"""
-    <canvas id="canvas" width="512" height="512"></canvas>
+    <canvas id="canvas" width="512" height="512"></canvas><img id="canvas-background" style="display:none;"/>
 """
 
 with gr.Blocks(css="""button { min-width: 80px; }""") as demo:
@@ -63,6 +54,8 @@ with gr.Blocks(css="""button { min-width: 80px; }""") as demo:
             replaceBtn = gr.Button(value="Replace")
           with gr.Column(min_width=80):
             importBtn = gr.Button(value="Import")
+          with gr.Column(min_width=80):
+            bgBtn = gr.Button(value="Background")
       with gr.Accordion(label="Json", open=False):
         with gr.Row():
           with gr.Column(min_width=80):
@@ -139,6 +132,12 @@ When using Q, X, C, R, pressing and dont release until the operation is complete
     inputs = [json],
     outputs = [],
     _js="(json) => { importPose(json); return []; }")
+  bgBtn.click(
+    fn = None,
+    inputs = [source],
+    outputs = [],
+    _js="(image) => { importBackground(image); return []; }"
+  )
 
   saveBtn.click(
     fn = None,

pose.py

@@ -31,8 +31,6 @@ def infer(image):
         dataset_info=dataset_info,
         return_heatmap=False,
         outputs=None)
-    print(pose_results)
-    print(returned_outputs)
 
     return pose_results, returned_outputs