JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
<div id="container"></div>
<input type='file' onchange="readURL(this);" />
<img id="image" src="#" />
JavaScript
$(document).ready(function() {
// Create Konva
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
stage.add(layer);
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
addImage(e);
};
reader.readAsDataURL(input.files[0]);
}
}