APEX

i use scirpt at Page load

const MAX_WIDTH = 700;
const MAX_HEIGHT = 400;
const MIME_TYPE = "image/jpeg";
const QUALITY = 0.7;

const input = document.getElementById("P15_PHOTO");
input.onchange = function (ev) {
  const file = ev.target.files[0]; 
  const blobURL = URL.createObjectURL(file);
  const img = new Image();
  img.src = blobURL;
  img.onerror = function () {
    URL.revokeObjectURL(this.src);

    console.log("Cannot load image");
  };
  img.onload = function () {
    URL.revokeObjectURL(this.src);
    const [newWidth, newHeight] = calculateSize(img, MAX_WIDTH, MAX_HEIGHT);
    const canvas = document.createElement("canvas");
    canvas.width = newWidth;
    canvas.height = newHeight;
    const ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, newWidth, newHeight);
    const currentCanvas = document.getElementById("root").querySelector("canvas");
    if (currentCanvas) {

      currentCanvas.remove();
    }
    document.getElementById("root").append(canvas);
  };
};

function calculateSize(img, maxWidth, maxHeight) {
  let width = img.width;
  let height = img.height;

  if (width > height) {
    if (width > maxWidth) {
      height = Math.round((height * maxWidth) / width);
      width = maxWidth;
    }
  } else {
    if (height > maxHeight) {
      width = Math.round((width * maxHeight) / height);
      height = maxHeight;
    }
  }
  return [width, height];
}

P15_PHOTO type Files Browse

when attached image i need compress image and In P15_PHOTO, same as before, already compressed version.

The objective is to have it resize on the cilent side before uploading to the database.

Is there something wrong?
thank you.