gkratz-canvas-image

You can see a demo of the plugin here

Requirements

jQuery

Install

via npm

npm i gkratz-canvas-image

via yarn

yarn add gkratz-canvas-image

Usage

<div class="image-container">
    <img src="assets/demo.jpg" alt="" id="demo_img">
    <canvas id="demo_canvas"></canvas>
</div>

<script src="assets/jquery/dist/jquery.min.js"></script>
<script src="assets/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="dist/js/gkratz-canvas-image.js"></script>
<script>
    $(document).ready(function () {
        canvas = new GKratzCanvas($('#demo_image'), $('#demo_canvas'));

        $('your button').on('click', function(e){
            e.preventDefault();
            $('your input').val(100);
            canvas.applyFilter('the filter name', 100);
        });

        $('your input').on('change', function(e) {
            e.preventDefault();
            canvas.applyFilter('the filter name', $(this).val());
        });
    });
</script>

Filters

grayscale
sepia
blur
brightness
contrast
invert
saturate
hue-rotate
red
blue
green

Save

canvas.getCanvas().toBlob(function(blob) {
    // Blob is an image file
    
    // send the blob to server
    
    // $.ajax({
    //     url : YOUR_PATH,
    //     data: {
    //         image: blob
    //     }
    // });
});

Reset

To reset the canvas, you nee to apply the reset Filter

canvas.reset();

To not allow multiple filters in the same time, use this

canvas.reset();
canvas.applyFilter(... , ...);

Events

init (warning, listener mut be declare before canvas initialisation)

$('body').on('gci_init', function (event, image, canvas) {
    console.log(event);
    console.log(image);
    console.log(canvas);
});

canvas = new GKratzCanvas(..., ...);

apply filter

$('body').on('gci_filter', function (event, image, canvas, filter, value) {
    console.log(event);
    console.log(image);
    console.log(canvas);
    console.log(filter);
    console.log(value);
});