draw result

zavx0z · Nov 23, 2023 · 15771a0 · 15771a0
1 parent 476756a
commit 15771a0
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 51 deletions.
diff --git a/index.html b/index.html
@@ -14,45 +14,55 @@
  return exist.includes(current) ? param[current] : exist.includes("en") ? param["en"] : param[exist[0]]
  } else return ""
  }
- 
+
  async function pathToImageData(imagePath) {
  return new Promise((res, rej) => {
+ const canvas = document.createElement("canvas")
  try {
- const canvas = document.createElement("canvas")
- const ctx = canvas.getContext("2d")
+ const ctx = canvas.getContext("2d", { willReadFrequently: true })
  document.createElement("canvas").getContext("2d")
  const img = new Image()
  img.onload = () => {
  canvas.width = img.width
  canvas.height = img.height
  ctx.drawImage(img, 0, 0)
  const imageData = ctx.getImageData(0, 0, img.width, img.height)
- console.log(imageData)
- res(imageData)
+ res({ img, imageData })
  }
  img.src = imagePath
  } catch (e) {
  rej(JSON.stringify(e))
+ } finally {
+ canvas.remove()
  }
  })
  }
 
- const res = await pathToImageData("bin.png")
- console.log("res", res)
+ const { img, imageData } = await pathToImageData("bin.png")
+
  const element = document.querySelector("skeleton-tracing")
- element.subscribe((snapshot) => setTimeout(() => console.log(snapshot), 1000))
+ element.subscribe((snapshot) => {
+ // console.log(snapshot.svg)
+ const resultSvg = document.getElementById("resultSvg")
+ const svgEl = new DOMParser().parseFromString(snapshot.svg, "application/xml")
+ resultSvg.appendChild(resultSvg.ownerDocument.importNode(svgEl.documentElement, true))
+ })
+
+ element.send({ imageData, preview: true })
+ // setTimeout(() => element.send(imageData), 4444)
 
  const template = document.querySelector("template")
  template.content.querySelector("h1").innerHTML = i18n(element.name)
+ template.content.appendChild(img)
  element.parentElement.insertBefore(template.content, element)
  </script>
  <dev-tools mobile></dev-tools>
  </head>
  <body>
- <skeleton-tracing preview src="bin.png"></skeleton-tracing>
+ <skeleton-tracing></skeleton-tracing>
  </body>
  <template>
  <h1></h1>
- <img src="bin.png" alt="source image" />
+ <div id="resultSvg"></div>
  </template>
 </html>
diff --git a/index.js b/index.js
@@ -1,12 +1,24 @@
 // https://github.com/LingDong-/skeleton-tracing/tree/master/wasm
 const html = String.raw
+function visualize(polylines, width, height, scale, stroke) {
+ let svg = `<svg version="1.1" xmlns="http:https://www.w3.org/2000/svg" width="${width * scale}" height="${height * scale}">`
+ for (let i = 0; i < polylines.length; i++) {
+ svg += `<path fill="none" stroke-width="${stroke}" stroke="rgb(${Math.floor(Math.random() * 200)},${Math.floor(
+ Math.random() * 200
+ )},${Math.floor(Math.random() * 200)})" d="M${polylines[i]
+ .map((x) => x[0] * scale + "," + x[1] * scale)
+ .join(" L")}"/>`
+ }
+ svg += "</svg>"
+ return svg
+}
 class Component extends HTMLElement {
  static tag = "skeleton-tracing"
  name = { ru: "Центральная линия", en: "skeleton-tracing" }
  description = { ru: "", en: "" }
  input = {
  img: {
- name: { ru: "Бинарное изображение", "en": "Binary image" },
+ name: { ru: "Бинарное изображение", en: "Binary image" },
  description: { ru: "" },
  type: "String",
  variant: "Path",
@@ -37,55 +49,26 @@ class Component extends HTMLElement {
  value: true,
  },
  }
- static observedAttributes = ["src", "preview"]
  constructor() {
  super()
  this.shadow = this.attachShadow({ mode: "closed" })
- console.log(
- "constructor",
- this.property.preview.value,
- this.hasAttribute("preview"),
- typeof this.getAttribute("preview"),
- this.getAttribute("preview")
- )
- }
- connectedCallback() {
- this.render("./bin.png")
- }
- attributeChangedCallback(attrName, oldValue, newValue) {
- switch (attrName) {
- case "preview":
- this.property.preview.value = this.hasAttribute("preview")
- break
- default:
- break
- }
- console.log(attrName, oldValue, typeof newValue, this.hasAttribute("preview"))
  }
- render(src) {
+ connectedCallback() {}
+ render({ imageData }) {
  import("https://cdn.jsdelivr.net/npm/skeleton-tracing-wasm/build/trace_skeleton_wasm.min.js").then(() => {
  TraceSkeleton.load().then((tracer) => {
- const canvas = document.createElement("canvas")
- const ctx = canvas.getContext("2d")
- const img = new Image()
- img.onload = () => {
- canvas.width = img.width
- canvas.height = img.height
- ctx.drawImage(img, 0, 0)
- const result = tracer.fromCanvas(canvas)
- const viz = tracer.visualize(result)
- setTimeout(() => console.log(this.property.preview.value), 1000)
- if (this.hasAttribute("preview")) this.shadow.innerHTML = viz
- canvas.remove()
- this.subscriptions.forEach((cb) => cb({ polylines: result.polylines, svg: viz }))
- }
- img.src = src
+ const result = tracer.fromImageData(imageData)
+ const viz = tracer.visualize(result)
+ if (this.property.preview.value) this.shadow.innerHTML = viz
+ const vizResult = visualize(result.polylines, result.width, result.height, 1, 4)
+ this.subscriptions.forEach((cb) => cb({ polylines: result.polylines, svg: vizResult }))
  })
  })
  }
- mailbox = []
- send({ src }) {
- this.render(src)
+ send({ imageData, preview }) {
+ console.log(preview)
+ this.property.preview.value = !!preview
+ this.render({ imageData })
  }
  subscriptions = []
  subscribe(cb) {