JSFiddle - React, Tailwind, and code Playground

by hamiltonlima

HTML

<div id="drop_zone">Drop files here</div>
<output id="list"></output>

<div class="box">
	<canvas id="outputCanvas" width='480' height='640' />
</div>

<div id="resultImg" class="box">

</div>

CSS

#drop_zone {
	border: 2px dashed #bbb;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 25px;
	text-align: center;
	font: 20pt bold 'Vollkorn';
	color: #bbb;
}

.box { width: 350px; float: left}

JavaScript

var counter = 1;
var readyToRock = false;
var PROP = 5;
var x=-1;
var y=-1;
var x1=0;
var y1=0;
var out  = null;
var imgOut = null;

// imagem temporaria
var elephant = new Image();
elephant.addEventListener("load", function(){ 
	readyToRock = true; 
	out.width = elephant.width / PROP;
	out.height = elephant.height / PROP;	
} );

function handleFileSelect(evt) {
	readyToRock = false;
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.
	var reader = new FileReader();
            
    reader.onload = function (e) {
    	elephant.src = e.target.result;
    }
            
    reader.readAsDataURL(files[0]);

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  // Setup the dnd listeners.
  var dropZone = document.getElementById('drop_zone');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
 
 
$(document).ready(function(){

    out = document.getElementById("outputCanvas");
    imgOut = out.getContext("2d");

 	out.addEventListener('mousemove', _mouseMove, false);
	out.addEventListener('mouseup', _mouseUp, false);
	out.addEventListener('mousedown', _mouseDown, false);

	setTimeout( animateOut, 20 );
});

function getMousePos(canvas, evt) {
	var rect = canvas.getBoundingClientRect();
	return {
	  x: evt.clientX - rect.left,
	  y: evt.clientY...