Desenfoque gaussiano rápido para Canvas-StackBlur. js

Vista prévia

Descripción

StackBlur. js es una biblioteca JavaScript independiente que aplica efectos de desenfoque gaussiano a elementos que utilizan HTML5 Canvas .

Instalación

# Yarn
$ yarn add stackblur-canvas

# NPM
$ npm install stackblur-canvas --save

Funcionamiento

Agregue la biblioteca de JavaScript StackBlur. js a su página HTML.

<script src="dist/stackblur.js"></script>

Aplique el efecto Desenfoque gaussiano a una imagen.

// 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)
StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);

Aplique el efecto Desenfoque gaussiano a un lienzo RGBA.

// 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.
StackBlur.canvasRGBA(targetCanvas, top_x, top_y, width, height, radius);

Aplique el efecto Desenfoque gaussiano a un lienzo RGB.

// 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.
StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius);

Aplique el efecto Desenfoque gaussiano a un ImageData RGBA.

// 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.
StackBlur.imageDataRGBA(imageData, top_x, top_y, width, height, radius);

Aplique el efecto Desenfoque gaussiano a un ImageData RGB.

// 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.
StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius);

Registro de cambios

08/05/2018

• v1.4.1