JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js"></script>
<script src="http://www.buddy.is/item/getImage/a3f3eb5ee0d96f784a"></script>
<div id="filtername" data-type="test"></div>

<canvas id="myCanvas" data-caman-hidpi-disabled></canvas>
<img id="myImg" style="display:none;" src="a3f3eb5ee0d96f784a">

    
dfgdfgdfg
    
<div id="newArea"></div>

<img id="testImage1" style="display:none;"...

JavaScript

var $myCanvas = $("#myCanvas");
var context = $myCanvas[0].getContext('2d');
var $myImg = $("#testImage1");
$myCanvas[0].width = $myImg[0].width;
$myCanvas[0].height = $myImg[0].height;
context.drawImage($myImg[0], 0, 0);


// Clone the original canvas
var $cloneCanvas = $myCanvas.clone();
		
// Clone the image stored in the $resizedCanvas as well
$cloneCanvas[0].getContext('2d').drawImage($myCanvas[0],0,0);
		
// Add the clone to the page and trigger the Caman library on it
$("#newArea").find('canvas').remove().end().append($cloneCanvas);


var filterName = $.trim($("#filtername").attr("data-type"));

console.log(filterName);


//Caman.DEBUG = true;

///////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////


Caman.Filter.register("nashvile", function() {

	// Variant 2
	
	this.gamma(0.85); // PSD 1,3
	
	this.curves('g', [0, 37], [255, 255], [255, 255]);		
	this.curves('b', [0, 133], [255, 255], [255, 255]);
	
	this.brightness(2); // PSD 6
	this.contrast(13); // PSD 51
	
	this.curves('g', [13, 0], [255, 255], [255, 255]);
	this.curves('b', [88, 0], [255, 255], [255, 255]);
	
	this.brightness(-1); // C -1 PSD -6
	this.contrast(8); // PSD 33
	
	this.curves('r', [0, 4], [255, 255], [255, 255]);
	this.curves('b', [0, 14], [255, 255], [255, 255]);
	
	this.newLayer(function () {
		// Change the blending mode
		this.setBlendingMode("multiply");
		
		this.opacity(90);

		// Now we fill this layer with a color
		this.fillColor('#f7d9ad');
	});
	
	
    return this;
});

///////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////

Caman.Filter.register("eyeem-dani", function() {

    this.curves('rgb', [0, 14], [75, 75], [174, 169], [245, 255]);
   
    this.curves('r', [0, 0], [97, 98], [211, 234], [222, 255]);
       
    this.curves('g', [21, 0], [44, 43], [84, 91], [232, 255]);
    
   ...