JSFiddle - React, Tailwind, and code Playground

by appsaloon

HTML

<div id="container">
    <input type="file" id="imageLoader" name="imageLoader" />
    <canvas id="imageCanvas" width="400" height="200"></canvas> 
    <a id="imageSaver" href="#">Save image</a>
</div>

CSS

div#container {
    padding: 30px;
    font-family: 'verdana', lucida;
}
input {
    background-color: #ccc;
    padding: 10px 20px;
    width: 360px;
    color: #777;
}
a{
    color: #777;
    display: block;
    background-color: #ccc; 
    width: 360px;
    padding: 10px 20px;
    margin-top: 2px;
    text-decoration:none;
}

JavaScript

var canvas = new fabric.Canvas('imageCanvas', {
    backgroundColor: 'rgb(240,240,240)'
});

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            var imgInstance = new fabric.Image(img, {
                scaleX: 0.2,
                scaleY: 0.2
            })
            canvas.add(imgInstance);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

var imageSaver = document.getElementById('imageSaver');
imageSaver.addEventListener('click', saveImage, false);

function saveImage(e) {
    this.href = canvas.toDataURL({
        format: 'jpeg',
        quality: 0.8
    });
    this.download = 'test.png'
}