JSFiddle - React, Tailwind, and code Playground

by germandost

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
 <input type="file" id="file">
        <canvas id="canvas" width="750" height="550"></canvas>
        <a href='' id='txt' target="_blank">Click Me!!</a>
        <br />
        <img id="preview" />

CSS

canvas{
                border: 1px solid black;
            }

JavaScript

var canvas = new fabric.Canvas('canvas');
            document.getElementById('file').addEventListener("change", function (e) {
                var file = e.target.files[0];
                var reader = new FileReader();
                console.log("reader   " + reader);
                reader.onload = function (f) {
                    var data = f.target.result;
                    fabric.Image.fromURL(data, function (img) {
                        var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
                        canvas.add(oImg).renderAll();
                        var a = canvas.setActiveObject(oImg);
                        var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
                    });
                };
                reader.readAsDataURL(file);
            });
            document.querySelector('#txt').onclick = function (e) {
                e.preventDefault();
                canvas.deactivateAll().renderAll();
                document.querySelector('#preview').src = canvas.toDataURL();
            };