Skip to content
This repository has been archived by the owner. It is now read-only.
No description, website, or topics provided.
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
blurred.js

README.md

JavaScript canvas-based image blurring engine

alt tag

Installation

You can load it via AMD, CommonJS or the object will be available on the Blurred global variable

How to use


// Instanciation
var myBlurredElement = new Blurred(document.getElementById('such-doge'));

// Blur radius/strength setting
myBlurredElement.setBlurStrength(3); 

// If there's no data-blurred attribute on your element or if you want to force the url, you can do it here
myBlurredElement.setUrl('http://wowsuchdoge.com/swag.jpg'); 

// Set mime type for better results
myBlurredElement.setMimeType('image/png');

// Set callback function
myBlurredElement.setCallback(function() {
    // Hello world
});

// Perform rendering
myBlurredElement.render();

// Get used properties (element, url, mimeType, blurStrength)
myBlurredElement.getProps(['url', 'blurStrength']);

// Destroy blurred image
myBlurredElement.destroy();

/* 

All calls, except render(), are chainable.
That way you can do 
  myBlurredElement
    .setBlurStrength(3)
    .setUrl('http://yolo.com/dickbutt.jpg')
    .setMimeType('image/jpeg')
    .setCallback(function() {
        console.log(this.getProps(['imgContainer']);
    }).render();
    
*/

Enjoy!

You can’t perform that action at this time.