How to save an image along with the annotations?

[TrongNhan30520]

Suppose I did mark some things using a box in the image, and now I want to save/export/download that image along with that box. How can we do that?

[nadavof]

Any answer for this question?

[TrongNhan30520]

@nadavof You can use canvas to redraw the image and caption frame then export it as an image

[asyncfinkd]

Hi guys, I've got the same issue, So I code it like this:

• Create canvas element into the HTML and also get element in the script (js)

• Draw with that canvas (with getContext("2d") functionality)

• Load an image which I'm using canvas background

• forEach region where can I have boxes/sizes/etc.

• Export canvas to the image/jpeg format (base64)

Briefly, I'll share with you what I wrote on my project and enjoy it.

const canvas = document.getElementById("myCanvas")
const ctx = canvas.getContext("2d")

const image = new Image()
image.src = imageUrl
image.crossOrigin = "Anonymous"
image.onload = () => {
      ctx.drawImage(image, 0, 0, canvas.width, canvas.height)

      output.images[0].regions.forEach((obj) => {
        ctx.strokeStyle = obj.color
        ctx.lineWidth = 2
        ctx.strokeRect(
          obj.x * canvas.width,
          obj.y * canvas.height,
          obj.w * canvas.width,
          obj.h * canvas.height
        )

        ctx.font = "20px Arial"
        ctx.fillStyle = obj.color
        ctx.fillText(1, obj.x * canvas.width, obj.y * canvas.height - 10)

        ctx.globalAlpha = 0.2
        ctx.fillStyle = obj.color
        ctx.fillRect(
          obj.x * canvas.width,
          obj.y * canvas.height,
          obj.w * canvas.width,
          obj.h * canvas.height
        )
})

const dataURL = canvas.toDataURL("image/jpeg")

I'm using this function on the onExit param in Annotator