当前位置：首页 > 网页特效 > 图片特效

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

分类：图片特效日期：2024-05-14 点击(22) 评论(0)

简介

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

```html
<script src="path/to/Chobi.min.js"></script>
```
#####  创建Chobi对象
Chobi对象的构造函数有4种类型的参数：

图片的类型：
```html
var imgObj = new Chobi(document.getElementById("image-file");
```
图片的路径：
```html
var imgObj = new Chobi("myimage.jpg");
```
图片对象：
```html
imgObj = new Chobi(new Image(...));
```
IMG元素：
```html
var imgObj = new Chobi(document.getElementById('myimg');
```
你可以任选一帧来构造Chobi对象。

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

```html
<canvas width="800" height="500" id="canvas"></canvas> 
```                 
使用下面的方法将图片转换为canvas。

```html
imgObj.ready(function(){
  this.loadImageToCanvas(document.getElementById("canvas"));
}    
```              
为图像设置效果：

```html
// 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有：

```html
// 剪裁图片 
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
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果