Apply image or gradient as border

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Visual Image Tool Demo</title>
  </head>
  <body>
    <div id="image-container" style="max-width:500px">
      <img
        id="myImage"
        src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&q=80"
        alt="Sample Image"
      />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@h4md1/[email protected]/dist/visual-image-tool.umd.js"></script>    <script></script>
  </body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}
#image-container {
  position: relative;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

JavaScript

var img = document.querySelector("img#myImage")
img.addEventListener("error", function () {
  alert("error loading image")
})
img.addEventListener("load", function () {
  // Initialize the VisualImageTool with the image element
  const imageTool = new VisualImageTool.VisualImageTool({
    imageElement: "#myImage", // Selector for the image element
    focusPoint: {
      enabled: true,
      style: {
        width: "20px",
        height: "20px",
        border: "1px solid white",
        boxShadow: "0 0 0 2px black, 0 0 5px rgba(0,0,0,0.5)",
        backgroundColor: "rgba(255, 255, 255, 0.8)",
      },
    },
    cropZone: {
      enabled: true,
      style: {
        border: "3px dashed #fff",
        backgroundColor: "rgba(0, 0, 0, 0.2)",
      },
      handleStyle: {
        width: "14px",
        height: "14px",
        backgroundColor: "white",
        border: "2px solid black",
        boxShadow: "0 0 3px rgba(0,0,0,0.5)",
      },
    },
    onChange: function (state) {
      console.log("State changed:", state)
    },
  })

  // Example usage
  imageTool.toggleFocusPoint(true)
  imageTool.toggleCropZone(true)
})