clip-image

裁剪图片

你可以使用这个插件，按照在配置对象中定义的尺寸在不失真情况下进行图片裁切。

介绍

你可以使用这个插件，按照在配置对象中定义的尺寸在不失真情况下进行图片裁切。这个插件有操作和显示两个部分，在操作区，你可以拖拽或缩放裁剪框，裁剪框的宽高比和目标图片尺寸宽高比一致且有使图片不失真的最小宽高；显示区实时响应操作区的拖拽和缩放等动作，将裁剪框中的图像按照配置对象中的尺寸显示出来。

用法

1.实例化

在使用之前，首先实例化一个对象。有两种实例化方式，一种是 new ClipImage(option,callback)，另一种首先实例化 var clipImage = new ClipImage()然后调用clipImage.init(option,callback)。你要传递一个不可缺省的配置对象 option和一个可选的回调函数 callback，回掉函数在实例化出错时被调用，如果出错而且回掉函数缺省，则上下文会输出错误信息到控制台。

var option = {
    mode:"rect",
    distPic:{
        width:976,
        height:480
    },
    elements:{
        wrapper:{
            value:"WRAPPER"
        },
        panel:"PANEL",
        showPanel:"SHOWPANELs"
    },
    url:"http://www.xxx.com/xx.png",
    scalePoint:{
        size:8,
        color:"blue"
    }
};
var callback = function(err){
    //err logic
};
 
// one
var clipImage = new ClipImage(option,callback)
 
// another
var clipImage = new ClipImage();
clipImage.init(option,callback);

---

初始化参数（option[,callback]

option
参数类型：object
参数描述：用来提供目标图片尺寸、模式、操作元素、缩放点配置；配置对象有5个参数

callback
参数类型：function
参数描述：用来当实例化出现错误时反馈给调用处，如果函数缺省，当发生错误时，执行上下文将会错误信息输出到控制台；回掉函数中有错误对象err参数。

---

初始化参数—option

mode
数据类型：string
数据可选：必须参数；
数据描述：用来指定目标图像的形状：circle（裁剪框圆形-显示区圆形）、rect（裁剪框矩形-显示区矩形）、circleToRect（裁剪框圆形-显示区正方形）

distPic
数据类型：object
数据可选：必须参数
数据描述：用来指定目标图像尺寸width、height和size

elements
数据类型：object
数据可选：必须参数
数据描述：用来提供dom中的元素，即容器元素wrapper、操作区面板panel、显示区面板showPanel

url
数据类型：string
数据可选：可选参数
数据描述：图片地址，用来在实例化时在操作区显示要裁剪图片

scalePoint
数据类型：object
数据可选：可选参数
数据描述：用来指定裁剪框拉伸点大小和颜色；有size和color两个属性

---

初始化参数—option—>distPic

width
数据类型：number
数据可选：-
数据描述：当mode为rect时distPic的属性值，也就是目标矩形图形的宽

height
数据类型：number
数据可选：-
数据描述：当mode为rect时distPic的属性值，也就是目标矩形图形的高

size
数据类型：number
数据可选：-
数据描述：当mode为circle或circleToRect时distPic的属性值，也就是目标圆形半径或正方形边长（2*size）

---

初始化参数—option—> elements

wrapper
数据类型：object
数据可选：必须参数
数据描述：容器元素用来包裹操作区面板，拥有value、高height、宽width三个属性。

panel
数据类型：stringorhtmlDOM
数据可选：必须参数
数据描述：用来提供操作区面板，值类型是canvas元素ID或dom节点对象

showPanel
数据类型：stringorhtmlDOM
数据可选：必须参数
数据描述：用来提供显示区面板，值类型是canvas元素ID或dom节点对象

---

初始化参数—option—> elements—>wrapper

value
数据类型：stringorhtmlDOM
数据可选：必须参数
数据描述：容器元素要是块级元素或内联块元素，用来包裹操作区元素panel

width
数据类型：number
数据可选：可选参数
数据描述：如果缺省且没有通过属性设置宽度则会出错，否则会覆盖之前或默认的宽度

height
数据类型：number
数据可选：可选参数
数据描述：如果缺省且没有通过属性设置高度则会出错，否则会覆盖之前或默认的高度

---

初始化参数—option—> scalePoint

size
数据类型：number
数据可选：必须参数
数据描述：裁剪框拉伸点大小

color
数据类型：string
数据可选：必须参数
数据描述：裁剪框拉伸点颜色

---

初始化参数—callback( err )

err
参数类型：object
参数描述：用来提供错误码和错误信息；错误信息对象有两个键(errType和errMsg)值对

---

初始化参数—callback—err

errType
参数类型：number
参数描述：错误码，每一个错误对应一个错误码

errMsg
参数类型：string
参数描述：错误信息

---

2.更换裁剪图片

通常情况下，当选择的图片不符合条件或者就像更换正在裁剪的图片时，这里提供了changeImgUrl方法去更改图片地址，这个方法是在一开始实例化后clipImage对象的一个属性方法。

clipImage.changeImgUrl(url,callback)
 
#example
var url = 'http://www.xxx.com/xx.png';
clipImage.changeImgUrl(url,function(err){
    if(err){
     //error handle logic
    }
})

---

方法参数（ url[,callback] ）

url
参数类型：string
参数描述：提供在操作区显示要裁剪图片地址源

callback
参数类型：function
参数描述：用来获取错误信息err，当callback没有定义时，且错误发生时，会将错误信息打印到控制台

---

初始化参数—callback( err )

err
参数类型：object
参数描述：用来提供错误码和错误信息；错误信息对象有两个键(errType和errMsg)值对

---

初始化参数—callback—err

errType
参数类型：number
参数描述：错误码，每一个错误对应一个错误码

errMsg
参数类型：string
参数描述：错误信息

---

3.获取裁剪图片

之后，你可以通过调用已经实例化对象的方法saveImage去获取裁剪框中的图像。目前获取图像的格式支持base64或blob对象。

clipImage.saveImage(type,callback)
 
#example
clipImage.saveImage('blob',function(err,data){
    if(err){
     //error handle logic
    }else{
     //image handle logic
    }
})

---

方法参数（ type[,callback] )

type
参数类型：string
参数描述：字符串（'blob'或'base64'），用来提供生成目标图像的数据类型

callback
参数类型：function
参数描述：用来获取生成的目标图像或错误信息，当有图像数据时，错误信息为null，当有错误信息时，图像数据为null,回调函数的两个参数分别是err和data

---

方法参数—callback( err,data )

err
参数类型：object
参数描述：用来提供错误码和错误信息；错误信息对象有两个键(errType和errMsg)值对

data
参数类型：bloborstring
参数描述：base64字符串或blob对象；用来提供已裁剪好的图像数据

---

方法参数—callback—err

errType
参数类型：number
参数描述：错误码，每一个错误对应一个错误码

errMsg
参数类型：string
参数描述：错误信息

---

4.错误码

errType	errMsg
1000	param of 'option' was missing
1001	param of 'option' was expected to be object
1010	'option.mode' was missing
1011	'option.mode' was expected to be string
1012	'option.mode' was expected to be string which is one of rect or circle or cirlcleToRect
1020	'option.distPic' was missing
1021	'option.distPic' was expected to be object
1022	'option.distPic.width' was missing
1023	'option.distPic.width' was expected to be number
1024	'option.distPic.height' was misssing
1025	'option.distPic.height' was expected to be number
1026	'option.distPic.size' was missing
1027	'option.distPic.size' was expected to be number
1030	'option.elements' was missing
1031	'option.elements' was expected to be object
1032	'option.elements.wrapper' was missing
1033	'option.elements.wrapper' was expected to be object
1034	'option.elements.wrapper.value' was missing
1035	'option.elements.wrapper.value' was expected to be string of div's id or HTMLDIVDOM
1036	'option.elements.wrapper.width' was expected to be number
1037	'option.elements.wrapper.height' was expected to be number
1038	'option.elements.panel' was missing
1039	'option.elements.panel' was expected to be string of canvas's id or HTMLCANVASDOM
1040	'option.elements.showPanel' was missing
1041	'option.elements.showPanel' was expected to be string of canvas's id or HTMLCANVASDOM
1050	'option.url' was expected to be string'
1060	'option.scalePoint' was expected to be object
1061	'option.scalePoint.color' was missing
1062	'option.scalePoint.color' was expected to be string
1063	'option.scalePoint.size' was missing
1064	'option.scalePoint.size' was expected to be number
1070	'callback' was expected to be function
1080	'url' was missing
1081	'url' was expected to be string
1082	'url' was invalid
1090	'type' was missing
1091	'type' was expected to be string
1092	'type' was expected to be string which is one of blob or base64
1100	'saveImage' Failed.