chobi.js-轻量级客户端图片处理js插件

当前位置:主页 > Html5库 > html5 canvas > chobi.js-轻量级客户端图片处理js插件
chobi.js-轻量级客户端图片处理js插件
分享:

    插件介绍

    chobi是一款轻量级的客户端处理图片javascript插件。该图片处理插件使用过滤器算法来处理图片,为图片设置不同的亮度、对比度和饱和度。它使用canvas来重绘图片,可以下载处理后的图片。

    浏览器兼容性

    浏览器兼容性
    时间:2016-09-11
    阅读:
简要教程

chobi是一款轻量级的客户端处理图片javascript插件。该图片处理插件使用过滤器算法来处理图片,为图片设置不同的亮度、对比度和饱和度。它使用Canvas来重绘图片,可以下载处理后的图片。它支持的图片效果有:

  • 黑白照效果
  • sepia
  • 负冲效果
  • 旧照片效果
  • cross process
  • 亮度增加
  • 亮度减少
  • 对比度增加
  • 对比度减少
  • 添加杂点
  • 版画效果
  • 装饰图效果
  • 蜡笔画效果

chobi.js插件图片处理效果

使用方法

在页面中引入Chobi.min.js文件。

<script src="path/to/Chobi.min.js"></script>
                
创建Chobi对象

Chobi对象的构造函数有4种类型的参数:

  • 图片的类型:
    var imgObj = new Chobi(document.getElementById("image-file");
    
  • 图片的路径:
    var imgObj = new Chobi("myimage.jpg");
    
  • 图片对象:
    imgObj = new Chobi(new Image(...));
    
  • IMG元素:
    var imgObj = new Chobi(document.getElementById('myimg');
    

你可以任选一帧来构造Chobi对象。

然后使用<canvas>来放置你的图像。

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

使用下面的方法将图片转换为canvas。

imgObj.ready(function(){
  this.loadImageToCanvas(document.getElementById("canvas"));
}                  
                

为图像设置效果:

// Black And White 
imgObj.blackAndWhite()

// Sepia 
imgObj.sepia()

// Negative 
imgObj.negative()

// Vintage 
imgObj.vintage()

// Cross 
ProcessimgObj.crossProcess()

// Brightness 
imgObj.brightness(amount)

// Contrast 
imgObj.contrast(amount)

// Noise effect 
imgObj.noise()

// Crayon effect 
imgObj.crayon()

// Cartoonify
imgObj.cartoon()

// Vignette 
imgObj.vignette(amount)

// Filter chaining 
imgObj.brightness(-5).sepia().negative()                  
                

API

chobi图片处理插件的可用API有:

// 剪裁图片 
imgObj.crop(xCord,yCord,width,height) 

// 获取图像对象
imgObj.getImage()

// 获取图片的数据,如图片的宽度,高度和像素信息
imgObj.extractImageData()

// 下载图片
imgObj.download(filename,filetype)

// 获取图片x,y坐标上的r,g,b,a值
imgObj.getColorAt(x,y)

// 使用colorObj来设置图片x,y坐标的颜色。
// colorObj格式如下:{red: redValue, green: greenValue, blue: blueValue, alpha: alphaValue}
imgObj.setColorAt(x,y,colorObj)

// 获取图片的宽度
imgObj.imageData.width

// 获取图片的高度
imgObj.imageData.height
                

chobi图片处理插件插件的github地址为:https://github.com/jayankaghosh/chobi

网友评论