JSFiddle - React, Tailwind, and code Playground

by confile

HTML

This is the Stage on the iPhone which is bounded by width: 320px. 
<div id="container"></div>

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

<br><br>
Exported Image (should have the same size as the original image): <br>
<img id="resultImage" />
   
<br><br>
Original image (Size: 1280px x 1280px)<br> 
<img id="original"/>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>

CSS

#container {
    border: 1px solid black;
    width: 320px;
    height: 320px;
}

#resultImage, #original {
    width: 1280px;
    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");
var downloadLink = document.getElementById("DownloadLink");

Kinetic.pixelRatio = 4;
stage = new Kinetic.Stage({
        container: 'container',
        width: 320,
        height: 320
    });
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, 320);
    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";
var imageUrl = "https://dl.dropboxusercontent.com/u/47067729/originalImage2.jpg";
imageObj.src = imageUrl;      
original.src = imageUrl;

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;
    downloadLink.href = dataURL;
    
};


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