Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gkratz-canvas-image with all npm packages installed. Try it out:

var gkratzCanvasImage = require("gkratz-canvas-image")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gkratz-canvas-image v1.1.0

jQuery plugin to apply filters and effects to images using canvas

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);
});

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free