JSFiddle - React, Tailwind, and code Playground

by musicreader

HTML

Image File:
<input type="file" id="file_upload"/>

<div id="result"/>

CSS

#result img{
  max-width:45%;
}

JavaScript

function handleFileSelect(evt) {
  console.log("Start Uploading Files");
  var files = evt.target.files; // FileList object
  
  var reader = new FileReader();
  
  reader.onload = function(event) {
    var imgtag = new Image();
    imgtag.onload=function(){  
    	
    
    	//document.body.append(imgtag);
      var canvas=document.createElement("canvas");
      
      console.log("im wxh:"+imgtag.width+"x"+imgtag.height)
      
      var source_width=imgtag.width;
      var source_height=imgtag.height;

      canvas.height=imgtag.height;
      canvas.width=imgtag.width;

      console.log("wxh:"+canvas.width+"x"+canvas.height)

      var context = canvas.getContext('2d');
      context.drawImage(imgtag, 0, 0, canvas.width, canvas.height);
      
      $("#result")[0].appendChild(imgtag);
      
      var originalImageData=context.getImageData(0,0,canvas.width, canvas.height);
      var pixels_source=originalImageData.data.subarray(0);
      
      var imageData=context.getImageData(0,0,canvas.width, canvas.height);
      processImage(imageData);      
      
      var line_top=calculateLine(imageData,canvas.width,canvas.height,0,1);
      var line_bottom=calculateLine(imageData,canvas.width,canvas.height,0,-1);
      var line_left=calculateLine(imageData,canvas.width,canvas.height,1,0);
      var line_right=calculateLine(imageData,canvas.width,canvas.height,-1,0);
      
      
    if(Math.abs(line_top.degree)>10 || Math.abs(line_bottom.degree)>10 || Math.abs(Math.abs(line_left.degree)-90)>15 || Math.abs(Math.abs(line_right.degree)-90)>15){
				alert("too rotated");
    }
      
      context.putImageData(imageData,0,0);
      
      function drawLine(line){
        context.beginPath();
        context.strokeStyle = "#FF0000";
        context.moveTo(line.p1.x, line.p1.y);
        context.lineTo(line.p2.x, line.p2.y);
        context.stroke(); 
      }
      drawLine(line_top);
      drawLine(line_bottom);
      drawLine(line_left);
      drawLine(line_right);
 ...