JSFiddle - React, Tailwind, and code Playground

HTML

<img crossOrigin="anonymous" id="preview" style="display:none;" src="https://lh3.googleusercontent.com/-zXZsjsGeYX0/UiuAEl31SDI/AAAAAAAABYI/g77Sb8-lzbY/w1109-h633-no/15-02-2013_internet.jpg">
<canvas id="canvas" style="background-size:contain;" /></canvas>

JavaScript

var img = document.getElementById("preview");

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var MAX_WIDTH = 800;
var MAX_HEIGHT = 800;

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 img2 = new Image();
img2.src = canvas.toDataURL("image/jpeg", 1.0);
//Exibe (desenha) a imagem na tela
ctx.drawImage(img, 0, 0, width, height);

console.log(img2);