JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

<a id="save" href="#">Save Image</a>

<img id="resultImage" />
<br><br>
Original image<br> 
<img id="original"/>
    <script src="http://yuccaberry.net/projects/sandman/KineticJs.js"></script>

CSS

#container {
    border: 1px solid red;
}

#resultImage, #original {
    width: 500px;
    height: auto;
}

JavaScript

console.clear();


var imageObj = new Image();
var img = null;
var saveBtn = document.getElementById("save");
var resultImage = document.getElementById("resultImage");
var original = document.getElementById("original");

Kinetic.pixelRatio = 4;
stage = new Kinetic.Stage({
        container: 'container',
        width: 640,
        height: 640
    });
layer = new Kinetic.Layer();

img = new Kinetic.Image({
    x: 0,   
    y: 0,   
    image: new Image()
});

layer.add(img);
stage.add(layer);

imageObj.onload = function() {
    
    var tmpWidth = Math.floor(imageObj.width /2);
	var w = Math.min(tmpWidth, 480);
    var h = imageObj.height * w / imageObj.width;

    img.setImage(this);
    img.setWidth(w);
    img.setHeight(h);
    
    img.cache(); // 5.1.0
    
  //  img.setFilter(Kinetic.Filters.Shinny);  // 4.5.2.
    img.filters([Kinetic.Filters.Shinny]); // 5.1.0
    layer.draw();
};

imageObj.crossOrigin = "anonymous";
imageObj.src = "https://dl.dropboxusercontent.com/u/47067729/Foto%2014.11.14%2000%2007%2046.jpg";      
original.src = "https://dl.dropboxusercontent.com/u/47067729/Foto%2014.11.14%2000%2007%2046.jpg";

saveBtn.onclick = function(evt) {
   console.log("save");
   var canvas = $(stage.getContent()).find('canvas').get(0);
    
    console.log("canvas: "+canvas);
    var dataURL = canvas.toDataURL('image/jpeg', 1.0);
    resultImage.src = dataURL;
    
};


Kinetic.Filters.Shinny = function(imageData, config) {    var curves =...