JSFiddle - React, Tailwind, and code Playground

by mrleroylee

HTML

<input type="file" id="imageLoader" name="imageLoader" />
<div id="container">
    <canvas id="imageCanvas"></canvas> 
    <ul id="penwidths"><li data-pen-width="1">1</li><li data-pen-width="5">5</li><li data-pen-width="10">10</li></ul>
    <a id="imageSaver" href="#">Save image</a>
</div>
<ul id="imageList"></ul>

CSS

div#container {
    position: absolute;
    top: 0;
    display: none;
    text-align: center;
    background: #fff;
    margin: 10px auto;
}
input {
    background-color: #ccc;
    padding: 10px 20px;
    width: 360px;
    color: #777;
}
#imageSaver{
    color: #777;
    display: block;
    background-color: #ccc; 
    width: 100%;
    padding: 10px 20px;
    margin-top: 2px;
    text-decoration:none;
}

JavaScript

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

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

// Todo: Resize canvas to only include image. Resize container to window.
var imageCanvas = document.getElementById('imageCanvas');
imageCanvas.height = 500;
imageCanvas.width = 500;

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

var penWidth = document.getElementById('penwidths');
penWidth.addEventListener('click', setPenWidth, false);

var canvasArray = [];
var thumbnailDimensions = [200,200]; //w,h

function handleImage(e) {
    /*
    get image
    get canvas
    scale image
    place image on canvas
    make canvas drawable
    show board and canvas and tools
     */
    //Get image
    var image = e.target.files[0];
    if(image.type.match('image.*')) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var img = new Image();
            img.onload = function () {
                //Scale Image
                var imgInstance = createScaledImage(img, canvas);
                //Place image on canvas
                canvas.add(imgInstance);
                canvas.isDrawingMode = true;
            }
            img.src = event.target.result;
        }    
        reader.readAsDataURL(image);
        showImgBoard();
    }
}

function createScaledImage(img, canvas) {
    var imgScale = getObjectScale(img.width, img.height, canvas.getWidth(), canvas.getHeight());
    return new fabric.Image(img, {
        scaleX: imgScale,
        scaleY: imgScale,
        selectable: false
    })
}
function showImgBoard() {
    document.getElementById('container').style.display = 'block';
}

function getObjectScale(wObject, hObject, wContainer, hContainer) {
    //Todo: this is still really crude. Need to factor in ratios near one.
    return wObject >...