Using CamanJS to filter canvas

Question

This is my HTML elements

<div class="wrapper">
    <nav class="navbar navbar-transparent">
      <div class="container-fluid">
        <div class="navbar-header">
            <span class="btn btn-white btn-file">
                <i class="material-icons">file_upload</i> Upload your file
                <input type="file" id="upload-image">
            </span>
        </div>
      </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div id="image-display" class="col-md-6 col-md-offset-2">
                <canvas id="edit-canvas" width="400">
            </div>
            <div id="toolbox" class="col-md-2">
                <div class="color-slider">
                    <strong>Brightness</strong>
                    <div id="brightnessSlider" class="slider slider-info">
                    </div>
                    <span id="brightness"></span>
                </div>
                <div class="color-slider">
                    <strong>Saturation</strong>
                    <div id="saturateSlider" class="slider slider-info">
                    </div>
                    <span id="saturate"></span>
                </div>
            </div>
        </div>
    </div>
</div>

I include CamanJS in order to manipulate canvas filtration effects. This is my JavaScript code to upload an image to canvas, resize and filter it

// Upload, resize image, draw canvas

function fileOnload(e) {
    var img=new Image;
    var canvas=document.getElementById('edit-canvas');
    var context=canvas.getContext('2d');
    img.onload=function(){
        canvas.height=canvas.width * img.height / img.width;
        var oc = document.createElement('canvas'), octx = oc.getContext('2d');
        oc.width = img.width;
        oc.height = img.height;
        octx.drawImage(img, 0, 0);
        while (oc.width * 0.5 > canvas.width) {
            oc.width *= 0.5;
            oc.height *= 0.5;
            octx.drawImage(oc, 0, 0, oc.width, oc.height);
        }
        oc.width = canvas.width;
        oc.height = oc.width * img.height / img.width;
        context.drawImage(img, 0, 0, oc.width, oc.height);
    };
    img.src=e.target.result;
    Caman('#edit-canvas',function(){
        this.render();
    });
};

$('#upload-image').change(function(e){
    var file = e.target.files[0];
    var imageType = /image.*/;
    if (!file.type.match(imageType))
        return;
    var reader = new FileReader();
    reader.onload = fileOnload;
    reader.readAsDataURL(file);
});

// Brightness slider

var brightnessSlider=document.getElementById('brightnessSlider');
noUiSlider.create(brightnessSlider,{
    start: 0,
    step: 1,
    connect: 'lower',
    range: {
        min: -100,
        max: 100
    },
    format: wNumb({
        decimals: 0
    })
});
brightnessSlider.noUiSlider.on('update',function(values,handle){
    $('#brightness').html(values[handle]);
    Caman('#edit-canvas',function(){
        this.brightness(values[handle]).render();
    });
});

When I slide, I try logging in the console, the value does change, but the canvas does not take any effects. Actually, a part of the canvas even disappears. I don't know why. Did I do anything wrong from guide of CamanJS?

Answer 1

I already found my problem. It was because of my poor asynchronous handling. It should be like this:

var brightnessSlider=document.getElementById('brightnessSlider');
noUiSlider.create(brightnessSlider,{
    start: 0,
    step: 1,
    connect: 'lower',
    range: {
        min: -100,
        max: 100
    },
    format: wNumb({
        decimals: 0
    })
});

(function(){

    // Upload, resize image, draw canvas

    function fileOnload(e) {
        var img=new Image;
        img.src=e.target.result;
        var canvas=document.getElementById('edit-canvas');
        var context=canvas.getContext('2d');
        img.onload=function(){
            canvas.height=canvas.width * img.height / img.width;
            var oc = document.createElement('canvas'), octx = oc.getContext('2d');
            oc.width = img.width;
            oc.height = img.height;
            octx.drawImage(img, 0, 0);
            while (oc.width * 0.5 > canvas.width) {
                oc.width *= 0.5;
                oc.height *= 0.5;
                octx.drawImage(oc, 0, 0, oc.width, oc.height);
            }
            oc.width = canvas.width;
            oc.height = oc.width * img.height / img.width;
            context.drawImage(img, 0, 0, oc.width, oc.height);
            Caman('#edit-canvas',function(){
                this.render();
            });

            brightnessSlider.noUiSlider.on('change',function(values,handle){
                $('#brightness').html(values[handle]);
                Caman('#edit-canvas',function(){
                    this.revert(false);
                    this.brightness(values[handle]).render();
                });
            });
        };
    };

    $('#upload-image').change(function(e){
        var file = e.target.files[0];
        var imageType = /image.*/;
        if (!file.type.match(imageType))
            return;
        var reader = new FileReader();
        reader.onload = fileOnload;
        reader.readAsDataURL(file);
    });
})();