You’ll need a library like pngjs to decode and re-encode the PNG file. Metadata from the uploaded file isn’t accessible once it’s an Image object. The blob produced by canvas only contains the pixel data.

I am using following code to resize an image, but the image’s location properties like longitude and latitude are cleared while resizing.

function resizeFile(data) {
  var uploadFile = data.rawFile;
  var img = new Image();
  var canvas = document.createElement("canvas");
  var reader = new FileReader();
  reader.onload = function (e) {
    img.onload = function () {
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);

      // The image constraints.
      var MAX_WIDTH = 400;
      var MAX_HEIGHT = 300;
      var width = img.width;
      var height = img.height;

      if (width > height) {
        if (width > MAX_WIDTH) {
          height *= MAX_WIDTH / width;
          width = MAX_WIDTH;
        }
      } else {
        if (height > MAX_HEIGHT) {
          width *= MAX_HEIGHT / height;
          height = MAX_HEIGHT;
        }
      }
      canvas.width = width;
      canvas.height = height;

      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, width, height);

      canvas.toBlob(
        function (blob) {
          blob.lastModifiedDate = new Date();
          blob.name = data.name;
          // Replace the original files with the new files.
          data.size = blob.size;
          data.rawFile = new File([blob], data.name);

          return data;
        },
        "image/png",
        1
      );
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(uploadFile);
}

How can I get the location of the image uploaded using input type file?