JSFiddle - React, Tailwind, and code Playground

by yairamon

HTML

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

<html>
<head>

  <base href="https://www.marvinj.org/script/index.js" target="_blank">
  
<title>MarvinJ - Javascript Image Processing Framework</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<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="../css/main.css">
<link rel="stylesheet" type="text/css" href="../css/hlformat.css">
<link rel="stylesheet" href="../css/font-awesome/css/font-awesome.min.css">

</head>
<body>

<div class="topbar">
	<div class="forkme">
		<a href="https://github.com/gabrielarchanjo/marvinj" target="_blank"><img src="../images/fork_me_github.png" style="pointer-events:all;"></img></a>
	</div>
	<div class="topContainer">
		<div style="display:inline-block">
			<img class="imgLogo" src="../images/marvinj_logo.png"></img>
		</div>
		<div style="display:inline-block; vertical-align:top; margin: 20px 0px 0px 50px;">
			<!-- Github Watch -->
			<a class="github-button" href="https://github.com/gabrielarchanjo/marvinj/subscription" data-size="large" data-show-count="true" aria-label="Watch gabrielarchanjo/marvinj on GitHub">Watch</a>
			<!-- Gitub - Star -->
			<a class="github-button" href="https://github.com/gabrielarchanjo/marvinj" data-size="large" data-show-count="true" aria-label="Star gabrielarchanjo/marvinj on GitHub">Star</a>
			<!-- Github - Fork -->
			<a class="github-button" href="https://github.com/gabrielarchanjo/marvinj/fork" data-size="large" data-show-count="true" aria-label="Fork gabrielarchanjo/marvinj on GitHub">Fork</a>
		</div>
	</div>
	
	<div...

JavaScript

corsPath = "https://cors-anywhere.herokuapp.com/https://images";  


/**********************************************************************
 * 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(corsPath + "/example2.jpg", function(){
		imageExampleFilters.draw(document.getElementById("canvasExampleFilters"));
		imageExampleFiltersOut = new MarvinImage(imageExampleFilters.getWidth(), imageExampleFilters.getHeight())
	});
}



function exampleAutoCrop(){
	imageAutoCrop = new MarvinImage();
  
  
  pathA = corsPath + "/cheetah.jpg";
  pathB = "https://images.unsplash.com/photo-1516822487734-69ff4b9bf49d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b333ce24a90e8263966f359537fdfc39&auto=format&fit=crop&w=1350&q=80";
  
  alert("here!");
	imageAutoCrop.load( pathB, function(){
  
  alert("loaded");
  
		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...