JSFiddle - React, Tailwind, and code Playground

by mhctoledo

HTML

<canvas id="queImg" ></canvas>
<input type="file" name="imagen" id="imagen" />

JavaScript

function gcd (a, b) {
  return (b == 0) ? a : gcd (b, a%b);
}

function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    //return [{width: srcWidth*ratio, height: srcHeight*ratio }];
   	return srcWidth*ratio+"x"+srcHeight*ratio;
}

/*var w = screen.width;
var h = screen.height;
var r = gcd (w, h);
document.write ("<pre>");
document.write ("Dimensions = ", w, " x ", h, "<br>");
document.write ("Gcd        = ", r, "<br>");
document.write ("Aspect     = ", w/r, ":", h/r);
document.write ("</pre>");*/

var myImage = new Image();
var thecanvas = document.getElementById("queImg");
var ctx = thecanvas.getContext("2d"); 

myImage.onload = function() { 
	ctx.drawImage(myImage, 0, 0, myImage.width, myImage.height);
}     

myImage.src = "http://cocacolacontigo.es/HTML/img/valoraciones/591d664d492fd.JPG";
//myImage.src = "http://cocacolacontigo.es/HTML/img/valoraciones/5922c66e69c29.jpg";

var w = myImage.width;
var h = myImage.height;
var r = gcd (w, h);

document.write ("<pre>");
document.write ("Dimensions = ", w, " x ", h, "<br>");
document.write ("Gcd        = ", r, "<br>");
document.write ("Aspect     = ", w/r, ":", h/r,"<br>");


var red = calculateAspectRatioFit(w,h,640,480);
document.write ("Red        = ", red,"<br>");
document.write ("</pre>");

var data_url=canvas.toDataURL("image/png");