JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
This is the Stage on the iPhone which is bounded by width: 320px.
<div id="container"></div>
<div id="buffer"></div>
<a id="save" href="#">Save Image</a>
<a id="downloadLink" href="#" download="image.jpeg">Download 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"...
CSS
#container {
border: 1px solid black;
width: 320px;
height: 320px;
}
#resultImage, #original {
width: 1280px;
height: auto;
}
#buffer, #downloadLink { display: none; }
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");
Konva.pixelRatio = 4;
stage = new Konva.Stage({
container: 'container',
width: 320,
height: 320
});
layer = new Konva.Layer();
img = new Konva.Image({
x: 0,
y: 0,
image: new Image()
});
layer.add(img);
setTimeout( function() {
var tmpWidth = Math.floor(imageObj.width /2);
var w = Math.min(tmpWidth, 320);
var h = imageObj.height * w / imageObj.width;
img.setImage(imageObj);
img.setWidth(w);
img.setHeight(h);
img.cache(); // 5.1.0
// img.setFilter(Konva.Filters.Shinny); // 4.5.2.
img.filters([Konva.Filters.Shinny]); // 5.1.0
stage.add(layer);
}, 100 );
imageObj.src = original.src;
saveBtn.onclick = function(evt) {
console.log("save");
var stage = new Konva.Stage({ container: 'buffer', width: imageObj.width, height: imageObj.height });
var layer = new Konva.Layer(), img = new Konva.Image({ x: 0, y: 0, image: imageObj });
img.filters([Konva.Filters.Shinny]);
layer.add( img );
stage.add( layer );
img.cache();
layer.draw();
console.log("buffer created");
var canvas = $(stage.getContent()).find('canvas').get(0);
console.log("canvas: "+canvas);
var dataURL = canvas.toDataURL('image/jpeg', 0.95);
resultImage.src = dataURL;
var downloadLink = document.getElementById('downloadLink');
downloadLink.href = dataURL;
downloadLink.style.display = "inline";
};
Konva.Filters.Shinny = function(imageData, config) {
var curves =...