Biblioteca de procesamiento de imágenes ligera del lado cliente-Chobi

Vista prévia

Descripción

Chobi es una biblioteca de procesamiento de imágenes de JavaScript pequeña y pura que le permite aplicar Canvas filtros basados en cualquier imagen que especifique.

Supported image filters:

• Blanco y negro
• Sepia
• Negativo
• vintage
• crossprocess
• Aumento de brillo
• La disminución del brillo
• Aumento de contraste
• El contraste disminuye
• Ruido
• Dibujos animados
• Vignette
• Lápiz

Funcionamiento

Descargue y coloque la versión minimizada de la biblioteca chobo en el documento.

<script src="src/Chobi.min.js"></script>

Cree un nuevo objeto Chobi y especifique la ruta de acceso a las imágenes.

var imgObj = new Chobi(document.getElementById("image-file");

// or
var imgObj = new Chobi("img.jpg");

// or
imgObj = new Chobi(new Image(...));

// or
imgObj = new Chobi(document.getElementById('myimg');

Cree un elemento canvas de HTML5 para colocar la imagen.

<canvas width="800" height="500" id="canvas"></canvas>

Convierta la imagen al lienzo.

imgObj.ready(function(){

this.loadImageToCanvas(document.getElementById("canvas"));
}

Aplique un filtro (o filtros de encadenamiento) de su elección a la imagen.

// Black And White
 imgObj.blackAndWhite()

// Sepia
 imgObj.Sepia()

// Negative
 imgObj.Negativo()

// Vintage
 imgObj.vintage()

// Cross
 ProcessimgObj.crossProcess()

// Brightness
 imgObj.brightness(amount)

// Contrast
 imgObj.contrast(amount)

// Crop
 imgObj.crop(xCord,yCord,width,height)

// Ruido effect
 imgObj.noise()

// Lápiz effect
 imgObj.crayon()

// Dibujos animadosify
imgObj.cartoon()

// Vignette
 imgObj.vignette(amount)

// Filter chaining
 imgObj.brightness(-5).Sepia().Negativo()

Api.

// Black And White
 imgObj.blackAndWhite()

// Sepia
 imgObj.Sepia()

// Negative
 imgObj.Negativo()

// Vintage
 imgObj.vintage()

// Cross
 ProcessimgObj.crossProcess()

// get an Image Element
imgObj.getImage()

// get the Image Data, like width, height and pixel information
imgObj.extractImageData()

// download as an image
imgObj.download(filename,filetype)

// get the r,g,b,a values at the x,y coordinate
imgObj.getColorAt(x,y)

// set the Color at x,y coordinate with colorObj. ColorObj has the following format {red: redValue, green: greenValue, blue: blueValue, alpha: alphaValue}
imgObj.setColorAt(x,y,colorObj)

// get the width of the image
imgObj.imageData.width

// get the height of the image
imgObj.imageData.height