# jCutter

**Repository Path**: crazybai/jCutter

## Basic Information

- **Project Name**: jCutter
- **Description**: js图片截取框插件。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-03-24
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# jCutter

#### 介绍
    js图片截取框插件。

#### 软件架构
    jQuery js插件

#### 使用说明

jCutter的创建或配置函数$.jCutter(options,callback).

options: 类型为object，可选，参数信息，如果省略此参数则将按内置默认参数配置插件。
	    该参数可配置的值有：

		配置		类型		默认值													描述		
		autoAjust	boolean		TRUE													是否当图片加载完成后自动调整图片的尺寸以适应插件窗口		
		limitEdge	boolean		TRUE													是否当图片缩放或移动时限制图片的尺寸及位置。默认行为：图片的最小尺寸（宽或高）不小于截取框的尺寸（宽或高）		
		maskOpacity	float		0.6														图片覆盖画布的透明度(0,1]，不允许透明，所以取值不能小于或等于0。		
		maskColor	string		black'													图片覆盖画布的颜色，支持样式表的颜色描述，如：white，black，rgb(0,0,111).etc		
		zoomPercent	float		0.3														缩放百分比，当图片缩放时按此百分比放大或缩小		
		width		float		600														插件窗口宽度		
		height		float		450														插件窗口高度		
		css			object		{}														插件窗口样式		
		cutWidth	float		200														截取框宽度		
		cutHeight	float		200														截取框高度		
		cutCss		object		{}														截取框样式		
		cutChange	function	function(x, y, width, height, cutWidth, cutHeight){}	截取信息发生改变时的回调函数。回调函数有一个回调参数arg，此参数的信息包括如下：		
																						信息		类型	描述
																						x			float	截取起始点横坐标
																						y			float	截取起始点纵坐标
																						width		float	图片缩放后的宽度
																						height		float	图片缩放后的高度
																						cutWidth	float	图片剪切宽度
																						cutHeight	float	图片剪切高度

callback: 创建或配置回调函数，如果创建成功将只返回{success:'success'},否则返回{err:'error information here...'}

#### 调用方法：		
    最简单的创建方法：
        $(selector).jCutter();
    如果$(selector)为img标签，插件将开始创建，否则将没有动作

    如果对初始化有其他要求：
        $(selector).jCutter({
            autoAjust:false,
            ...//其他配置信息
        });

    如果需要对插件参数进行更改：
        $(selector).jCutter({
            limitEdge:false,
            ...//其他配置信息
        });