Upload and rotate images using opencv.js

Question

I'm working on an exercise in which I should create an input button to add images and an option to rotate them by chosen degrees (left or right) using opencv.js,

I copied relevant code from their documentation and adjusted some of it, right now it saves only the last image I uploaded and if I'm trying to rotate one of the first images it rotates him but changes the image to the last one that was uploaded.

From my understanding, they used a <img> tag in their documentation to load an image and then it shows it on my canvas but it saves only the last one so I tried to create a few <img> tags with different id's in the HTML file and also tried later creating dynamically <img> tags on the javascript file but both of them didn't work and I also tried to save the blob sources in an array and then use them in the rotation code and it didn't work either and I can't find the solution to this issue.

I also tried to look for tutorials and other articles about it but couldn't find a solution.

this is my html file:


<body>
    <div class="container" id="container">
      <!-- <div id="imageContainer" style="display: none"> -->
      <img id="imageSrc" style="display: none" />
      <!-- </div> -->
      <div class="btnDiv">
        <input
          type="file"
          id="fileInput"
          name="file"
          accept=".jpg, .jpeg, .png"
          style="display: none"
        />
        <label for="fileInput" class="btnClass">Add Image</label>
        <button
          type="button"
          onclick="rotateImg(parseFloat(document.getElementById('angleInput').value), 'left')"
          class="btnClass"
        >
          Left
        </button>
        <button
          type="button"
          onclick="rotateImg(parseFloat(document.getElementById('angleInput').value), 'right')"
          class="btnClass"
        >
          Right
        </button>
        <label class="inputClass">Angle</label>
        <input
          type="number"
          id="angleInput"
          class="inputClass"
          min="0"
          max="180"
        />
      </div>
    </div>
    <script src="script.js" type="text/javascript"></script>
    <script async src="opencv.js" type="text/javascript"></script>
  </body>

this is my javascript file:

const imgElement = [];

imgElement.push(document.getElementById("imageSrc"));

let inputElement = document.getElementById("fileInput");
let imgCount = 0;
let selectedImage;

inputElement.addEventListener(
  "change",
  (e) => {
    imgElement.push(document.getElementById("imageSrc"));
    imgElement[imgCount].src = URL.createObjectURL(e.target.files[0]);
  },
  false
);

imgElement[imgCount].onload = () => {
  let randomX = Math.floor(Math.random() * 380);
  let randomY = Math.floor(Math.random() * 380);
  const newCanvas = document.createElement("canvas");
  newCanvas.style.position = "absolute";
  newCanvas.style.width = "50px";
  newCanvas.style.height = "50px";
  newCanvas.style.top = `${randomY}px`;
  newCanvas.style.left = `${randomX}px`;
  newCanvas.id = `canvas-${imgCount}`;

  newCanvas.addEventListener("click", () => {
    selectedImage = newCanvas.id;
  });

  document.getElementById("container").appendChild(newCanvas);
  let mat = cv.imread(imgElement[imgCount]);
  cv.imshow(`canvas-${imgCount}`, mat);
  imgCount++;
  mat.delete();
};

const rotateImg = (degrees, direction) => {
  let src = cv.imread(imgElement[imgCount]);
  let dst = new cv.Mat();
  let dsize = new cv.Size(src.rows, src.cols);
  let center = new cv.Point(src.cols / 2, src.rows / 2);
  let newDegrees;
  if (direction === "left") newDegrees = degrees;
  else newDegrees = -degrees;

  let M = cv.getRotationMatrix2D(center, newDegrees, 1);
  cv.warpAffine(
    src,
    dst,
    M,
    dsize,
    cv.INTER_LINEAR,
    cv.BORDER_CONSTANT,
    new cv.Scalar()
  );

  if (selectedImage == null) {
    alert("No image selected");
  }

  cv.imshow(`${selectedImage}`, dst);
  src.delete();
  dst.delete();
  M.delete();
};

Those are pictures of the issue (I uploaded them in that order: apple > banana > monkey):

Upload and rotate images using opencv.js

0 Answers0