JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<input type="file" id="inputFile">
<br><br>
    
<div id="container"></div>
    
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>

JavaScript

var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

var layer = new Kinetic.Layer();

 stage.add(layer);



$("#inputFile").on("change", function() {
    
    var inputFile = $("#inputFile")[0];
    var myFile = inputFile.files[0];
    
    var _URL = window.URL || window.webkitURL;
   
    var image = new Image(); 
    image.onload = function() {
		console.log("image.onload ");
        
        var canvas = document.createElement("canvas");
      	var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);
        
        console.log(canvas);
        
        var kimage = new Kinetic.Image({
          image: canvas
        });
        console.log(kimage);
        
        layer.add(kimage);
        layer.draw();
        
	};	
    image.src = _URL.createObjectURL(myFile);
});