$(function () {

    //input url

    $('#url').change(function () {

        var url = $('#url').val();

        var img = new Image();

        img.onload = function () {

            $('#canvas').fadeOut(1);

            var file = $('#file')[0];

            file.value = "";

            $('#canvas').fadeIn(1);

            var cnvsH = 250;

            var cnvsW = img.naturalWidth * cnvsH / img.naturalHeight;

            var canvas = document.querySelector('#canvas');

            canvas.setAttribute('width', cnvsW);

            canvas.setAttribute('height', cnvsH);

            var ctx = canvas.getContext('2d');

            ctx.drawImage(img, 0, 0, cnvsW, cnvsH);

        }

        img.src = url;

    });

    //input file

    $('#file').change(function () {

        var file = this.files[0];

        var img = new Image();

        var fr = new FileReader();

        fr.onload = function (e) {

            img.onload = function () {

                $('#canvas').fadeOut(1);

                var url = $('#url')[0];

                url.value = "";

                $('#canvas').fadeIn(1);

                var cnvsH = 250;

                var cnvsW = img.naturalWidth * cnvsH / img.naturalHeight;

                var canvas = $('#canvas');

                canvas.attr('width', cnvsW);

                canvas.attr('height', cnvsH);

                var ctx = canvas[0].getContext('2d');

                ctx.drawImage(img, 0, 0, cnvsW, cnvsH);

            }

            img.src = e.target.result;

        }

        fr.readAsDataURL(file);

    });

});