kotretan

Sources: codeproject.com (1) developer.mozilla.org (2) ipycanvas.readthedocs.io (3) github.com (4)

Here is an example code to achieve what you described using Vite:

First, create a new Vite project by running npm init vite@latest and follow the prompts.

Then, create a new file main.js and add the following code:

js
Edit
Full Screen
Copy code
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use().mount('#app')
Create a new file App.vue and add the following code:

html
Edit
Run
Full Screen
Copy code
<template>
  <div>
    <input type="file" @change="handleImageUpload" />
    <canvas id="canvas" width="400" height="400"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: null,
      polygons: [],
      currentPolygon: null,
    }
  },
  methods: {
    handleImageUpload(event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.onload = () => {
        this.image = new Image()
        this.image.src = reader.result
        this.image.onload = () => {
          const canvas = document.getElementById('canvas')
          const ctx = canvas.getContext('2d')
          ctx.drawImage(this.image, 0, 0, canvas.width, canvas.height)
        }
      }
      reader.readAsDataURL(file)
    },
    handleMouseDown(event) {
      if (!this.currentPolygon) {
        this.currentPolygon = []
      }
      this.currentPolygon.push([event.offsetX, event.offsetY])
    },
    handleMouseMove(event) {
      if (this.currentPolygon) {
        this.currentPolygon.push([event.offsetX, event.offsetY])
      }
    },
    handleMouseUp() {
      if (this.currentPolygon) {
        this.polygons.push(this.currentPolygon)
        this.currentPolygon = null
      }
    },
    sendPolygonsToAPI() {
      // Send the polygons to your API with their corresponding IDs
      console.log(this.polygons)
      // Replace with your API call
      // fetch('/api/polygons', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify(this.polygons),
      // })
    },
  },
  mounted() {
    const canvas = document.getElementById('canvas')
    canvas.addEventListener('mousedown', this.handleMouseDown)
    canvas.addEventListener('mousemove', this.handleMouseMove)
    canvas.addEventListener('mouseup', this.handleMouseUp)
  },
}
</script>
This code allows the user to upload an image, draw polygons on top of the image, and send the polygons to an API with their corresponding IDs.

Note that you'll need to replace the sendPolygonsToAPI method with your actual API call.

Also, this is just a basic example, and you may want to add more features, such as:

Handling multiple images
Allowing the user to edit or delete polygons
Displaying the polygon IDs on top of the image
etc.