JSFiddle - React, Tailwind, and code Playground

by lun471k

HTML

<select id="IR_fileChooser"></select>
<canvas id="IR_canvas"></canvas>

JavaScript

window.imageList = [{
    name: "One",
    width: '120',
    height: '100',
    url: 'http://www.friendshipcircle.org/blog/wp-content/uploads/2011/03/Test.jpg'
}, {
    name: "Two",
    width: '120',
    height: '100',
    url: 'http://www.lessons4living.com/images/penclchk.gif'
}];


$(document.body).on('change', '#IR_fileChooser', function () {
    initCanvas(true);
});

function initCanvas(drawDefault, width, height) {
    if (typeof width === undefined) var width = 480;
    if (typeof height === undefined) var height = 250;
    if (typeof drawDefault === undefined) var drawDefault = true;
    var canvas = $('#IR_canvas');
    canvas.prop('width', width);
    canvas.prop('height', height);
    if (canvas[0].getContext) {
        var ctx = canvas[0].getContext('2d');
        var dx = 0,
            dy = 0;

        //Drawing the first image from the select element.
        if (drawDefault) {
            var select = $('#IR_fileChooser');
            var imageURL = $('#IR_fileChooser :selected').val();
            var image = $('<img>', {
                src: imageURL
            });
            var index = select.find(':selected').index();
            var imageData = imageList[index];
            image.src = imageURL;
            console.log(image.src);
            image.load(function () {
                console.log("loaded");
                dx = 420;
                dy = 200;
                console.log(this);
                ctx.drawImage(this, dx, dy, 60, 50);
            });

        }
    }
}

function loadImageSelect(oImageList, originalsOnly) {
    if (typeof oImageList === undefined) return false;
    if (typeof originalsOnly === undefined) var originalsOnly = true;
    var select = $('#IR_fileChooser');
    for (var i in oImageList) {
        select.append('<option value="' + oImageList[i].url + '">' + oImageList[i].name + '</option>');
    }
}

loadImageSelect(imageList, false);
initCanvas(true);