JSFiddle - React, Tailwind, and code Playground

by yairamon

HTML

<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>

MARVINJ CROPPING
https://www.marvinj.org/en/index.html

//  script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>


<hr></hr>

DROP SHADOWS
<br>

https://stackoverflow.com/questions/13762864/image-dark-light-detection-client-sided-script

http://jsfiddle.net/mpdvmhcm/1/


<hr></hr>
<hr></hr>
 

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109677410-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-109677410-1');
</script>
<!-- Github. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- END - Github. -->



<link rel="stylesheet" type="text/css" href="https://www.marvinj.org/css/main.css">
<link rel="stylesheet" type="text/css" href="https://www.marvinj.org/css/hlformat.css">
<link rel="stylesheet" href="https://www.marvinj.org/css/font-awesome/css/font-awesome.min.css">


  
<div class="divFlex divExperiment" style="width:1188; margin-left:auto; margin-right:auto;">
	<div class="floatLeft">
		<canvas width="1000" height="570" id="canvasAutoCrop"></canvas>
	</div>
	<div class="floatLeft">
		<div class="buttonFilter" onclick="clickDetectCorners()">1. Detect Corners</div>
		<div class="buttonFilter" onclick="clickSelectCropArea()">2. Select Crop Area</div>
		<div class="buttonFilter" onclick="clickAutoCropCrop()">3. Crop</div>
		<div class="buttonFilter" onclick="clickAutoCropReset()">Reset</div>
	</div>

</div>

JavaScript

/**********************************************************************
 * GLOBAL VARIABLES
 *********************************************************************/
var imageExampleFilters,
	imageExampleFiltersOut,
	imageAutoCrop,
	imageFractals;
	
	
	
/**********************************************************************
 * LOADING METHODS
 *********************************************************************/

exampleFilters();
exampleAutoCrop();
exampleFractals();

function example1(){
	imageExample1 = new MarvinImage();
	imageExample1.load("../images/foto_02.jpg", function(){
		imageExample1.draw(document.getElementById("canvasExample1A"));
		Marvin.colorChannel(imageExample1, imageExample1, 14, 0, -8);
		imageExample1.draw(document.getElementById("canvasExample1B"));
	});
}

function exampleFilters(){
	imageExampleFilters = new MarvinImage();
	imageExampleFilters.load("../images/example2.jpg", function(){
		imageExampleFilters.draw(document.getElementById("canvasExampleFilters"));
		imageExampleFiltersOut = new MarvinImage(imageExampleFilters.getWidth(), imageExampleFilters.getHeight())
	});
}

function exampleAutoCrop(){
	imageAutoCrop = new MarvinImage();
	imageAutoCrop.load("../images/cheetah.jpg", function(){
		imageAutoCrop.draw(document.getElementById("canvasAutoCrop"));
	});
}

function exampleFractals(){
	imageFractals = new MarvinImage(1000,570);
	itfFractal(ITF_DRAGON);
}

function clickExampleFiltersInvertColors(){
	Marvin.invertColors(imageExampleFilters, imageExampleFiltersOut);
	imageExampleFiltersOut.draw(document.getElementById("canvasExampleFilters"));
}


function clickExampleFiltersInvertScale(){
	Marvin.scale(imageExampleFilters, imageExampleFiltersOut, Math.floor(imageExampleFilters.getWidth()/2), Math.floor(imageExampleFilters.getHeight()/2));
	
	// Clear canvas
	var canvas = document.getElementById("canvasExampleFilters");
	canvas.getContext("2d").clearRect(0, 0, canvas.width,...