裁剪图片

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

介绍

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

用法

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.|