# cutphoto

**Repository Path**: none/cutphoto

## Basic Information

- **Project Name**: cutphoto
- **Description**: 图片裁剪
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-11-08
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: None
 * @LastEditors: Please set LastEditors
 * @Date: 2019-11-08 18:28:35
 * @LastEditTime: 2019-11-27 18:52:43
 * @Description: 
 -->
# cutphoto
cutphoto是一个简单易用的切图工具，没有条条框框，全部自定义
> 目前项目依赖 zrender, hammer, lrz

### DEMO
[DEMO](http://none.gitee.io/cutphoto/)

### 文档详细说明
> git@osc 的pages有点问题,可以通过 `npm run docs:view` 查看文档
[文档](http://none.gitee.io/cutphoto/out)


### 使用

```javascript
// 使用
const cutphoto = new Cutphoto({
  image: { img: img.src },
  container: document.querySelector('#cutphoto'),
  mask: {
    img:this.$refs.backbg.src,
    size: [230, 160],
    opacity:0.98
  },
  output: {
      size: [230, 160],
  },
})
// 调整好图片位置大小后调用done即可获取新图片的base64
const base64=cutphoto.done().base64

// 可以通过调用preview方法进行预览,size设置越大越影响性能,预览不影响输出大小,尽量小
cutphoto.preview([125,80],data => {
    const src = data.base64
    // ...do something
})
```
### 参数

```javascript
// 接收参数如下
interface Option {
  /**
   * @description: 容器
   */  
  container?: HTMLElement
  /**
   * @description: 待处理原始图片
   */  
  image: {
    /**
     * @description: 图片对象
     */  
    img: Img
    /**
     * @description: 最大缩放
     */  
    maxZoom?: number
    /**
     * @description: 最小缩放
     */   
    minZoom?: number
  }
  /**
   * @description: 初始化时进行压缩，压缩后的宽高与质量
   */   
  lrz?: {
    /**
     * @description: 图片大小
     */ 
    size?: Size
    /**
     * @description: 图片质量
     */  
    quality?: number
  }
  /**
   * @description: 遮罩背景图
   */ 
  mask?: {
    /**
   * @description: 遮罩层图片透明度
   */  
    opacity?: number
    /**
     * @description: 遮罩层图片
     */ 
    img?: string
    /**
     * @description: 遮罩层大小
     */ 
    size?: Size
    /**
     * @description: 遮罩层位置
     */ 
    position?: Point
    // // 是否支持调节
    // resize?: boolean
    // // 固定比例
    // ratio?: boolean
  }
  /**
   * @description: 输出参数
   */ 
  output?: {
    /**
     * @description: 输出图片size
     */  
    size?: Size
    /**
     * @description: 输出图片质量
     */   
    quality?: number
    /**
     * @description: 输出类型
     */    
    type?: string
  }
  /**
   * @description: 预览设置
   */ 
  preview?: {
    /**
     * @description: 预览大小
     */ 
    size?: Size
    /**
     * @description: 预览回调函数
     */ 
    callback?: (output: Output) => any
  }
}

```