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

[sumn2u]

@asyncfinkd I achieve the download task by doing this.

    const downloadAnnotatedImage = () => {
        const divElement = document.getElementById('image-container');
        const svgElement = document.getElementById('region-svg');
        html2canvas(divElement, {
            width: svgElement.getAttribute('width'),
            height: svgElement.getAttribute('height'),
        }).then(canvas => {
            const dataURL = canvas.toDataURL('image/png');
            const link = document.createElement('a');
            link.href = dataURL;
            link.download = 'downloaded-image.png';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
  };

Here, image-container is the wrapper that wraps the canvas and svg image. You can check my work here.