StackBlur.js un utilissimo plugin per applicare l’effetto blur (iOS style) con JavaScript sulle nostre immagini
Ovviamente il source del plugin è hostato su GitHub. Vedi StackBlur.js su GitHub.
Se invece volete vedere live come il plugin lavori, è online una demo di StackBlur.js
Oltre alla versione standalone, è disponibile la versione per npm e bower.
Come usare StackBlur.js con Bower
Installiamo il plugin
bower install stackblur-canvas
e includiamo dist/stackblur.js o dist/stackblur.min.js nel nostro progetto HTML:
<script src="bower_components/stackblur-canvas/dist/stackblur.js"></script>
Come usare StackBlur.js con npm
installiamo il plugin
npm install --save stackblur-canvas
e richiamarla
var StackBlur = require("stackblur-canvas");
Di seguito tutte le API di StackBlur.js disponibili
Image as source:
StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);
sourceImage: the HTMLImageElement or its id.
targetCanvas: the HTMLCanvasElement or its id.
radius: the radius of the blur.
blurAlphaChannel: Set it to true if you want to blur a RGBA image (optional, default = false)
RGBA Canvas as source:
StackBlur.canvasRGBA(targetCanvas, top_x, top_y, width, height, radius);
targetCanvas: the HTMLCanvasElement.
top_x: the horizontal coordinate of the top-left corner of the rectangle to blur.
top_y: the vertical coordinate of the top-left corner of the rectangle to blur.
width: the width of the rectangle to blur.
height: the height of the rectangle to blur.
radius: the radius of the blur.
RGB Canvas as source:
StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius);
targetCanvas: the HTMLCanvasElement.
top_x: the horizontal coordinate of the top-left corner of the rectangle to blur.
top_y: the vertical coordinate of the top-left corner of the rectangle to blur.
width: the width of the rectangle to blur.
height: the height of the rectangle to blur.
radius: the radius of the blur.
RGBA ImageData as source:
StackBlur.imageDataRGBA(imageData, top_x, top_y, width, height, radius);
imageData: the canvas’ ImageData.
top_x: the horizontal coordinate of the top-left corner of the rectangle to blur.
top_y: the vertical coordinate of the top-left corner of the rectangle to blur.
width: the width of the rectangle to blur.
height: the height of the rectangle to blur.
radius: the radius of the blur.
RGB ImageData as source:
StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius);
imageData: the canvas’ ImageData.
top_x: the horizontal coordinate of the top-left corner of the rectangle to blur.
top_y: the vertical coordinate of the top-left corner of the rectangle to blur.
width: the width of the rectangle to blur.
height: the height of the rectangle to blur.
radius: the radius of the blur.
