JSFiddle - React, Tailwind, and code Playground

by nukeboy212

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReturNull Photo Editor</title>
    <link rel="stylesheet" href="style.css">
    
    
</head>
<body>
<div id="wrapper">
 <input type="file" accept="image/*" onchange="preview_image(event)"><br><br>
 <div class="editarea"> <!--<img id="output_image" width="250">--> <canvas id="output_image" width="250"></canvas></div>

</div>
</body>
</html>

CSS

body
{
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#0B3861;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
 margin: auto;
}
#output_image
{
margin: auto;
 max-width:300px;
}

.editarea{
width: 50%;
background: #EC6C67;
margin: auto;
}

JavaScript

function preview_image(event) 
{
    
  var output = document.getElementById('output_image');
 var reader = new FileReader();
  var ctx = output.getContext('2d');
 //output.src = "/loading.gif";
 reader.onload = function()
 {
  //output.src = reader.result;
  var img = new Image();   // Create new img element
  img.src = reader.result; // Set source path
  img.onload = function() {
  var wth =  img.clientHeight / img.clientWidth;
  img.width=300;
  img.height=300 * wth;
  ctx.drawImage(img, 0, 0);
       }
 }
 reader.readAsDataURL(event.target.files[0]);
}