JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<form>
    <input type="file" id="f" />
</form>
</body>

JavaScript

var h=function(e){
	var fr=new FileReader();
	fr.onload=function(e){
		var img=new Image();
		img.onload=function(){
			var MAXWidthHeight=640;
			var r=MAXWidthHeight/Math.max(this.width,this.height),
			w=Math.round(this.width*r),
			h=Math.round(this.height*r),
			c=document.createElement("canvas");
			c.width=w;c.height=h;
			c.getContext("2d").drawImage(this,0,0,w,h);
			/*if(this.src.indexOf("image/jpeg") > -1) {
				this.src=c.toDataURL("image/jpeg");
			} else {
				this.src=c.toDataURL();
			}*/
			this.src=c.toDataURL();
			document.body.appendChild(this);
		}
		img.src=e.target.result;
	}
	fr.readAsDataURL(e.target.files[0]);
}

document.getElementById('f').addEventListener('change',h,false);