0.0.3 • Published 4 years ago
@redbuck/cropper v0.0.3
轻量截图库
使用
- 安装:
npm install @redbuck/cropper或者yarn add @redbuck/cropper. - 引入:
- 模块化
commonjs:
const Cropper = require('@redbuck/cropper'). ES6 module:import Cropper from "@redbuck/cropper". - CDN
页面中添加
<script type="text/javascript" src="to/path/cropper.js"></script>
- 模块化
commonjs:
- 使用:
const cropper = new Cropper(el, options).
参数
| 字段 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| el | Element 丨 string | undefined | 截图组件挂载位置 |
| options | Object | {} | 配置对象 |
options
| 字段 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| url | string | "" | 需要截取的图片地址 |
| width | number | 600 | 容器宽度 |
| height | number | 375 | 容器高度 |
| window | object | null | 截图框的 rect |
| wheelSpeed | number | 0.05 | 缩放步长 |
| maxRate | number | 10 | 最大放大倍数 |
| minRate | number | 1 | 最小放大倍数 |
| cropMode | string | 'cover' | 截图模式 |
| maskColor | string | 'rgba(0,0,0,0.6)' | 蒙层颜色 |
| devicePixelRatio | number | window.devicePixelRatio | dpr |
window 属性(window 类型可用)
| 字段 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| x | number | 0 | 截图框的横坐标 |
| y | number | 0 | 截图框的纵坐标 |
| width | number | options.width/2 | 截图框的宽度 |
| height | number | 0 | 截图框的高度 |
| resizeable | boolean | true | 是否允许改变截图框 |
| moveable | boolean | true | 是否允许移动截图框 |
cropMode 详解
- cover, 容器即截图框,图片只能在容器内部移动,最小只能缩小到容器的最长边.
- contain, 容器即截图框,图片移动,缩放不限制
- window, 显示截图框,截图框的移动限制在图片内(图片的缩放移动也受截图框的限制)
- free-window,显示截图框,截图框的移动不受限制
API
output 同步输出 window 区域的图片
接口定义: output(options?: OutputType): string | Blob | Error;
参数定义:
type OutputType = {
mime?: string,
type?: string,
quality?: number
};moveTo 移动图片至指定位置
接口定义: moveTo(x: number, y: number): void;
zoom 在指定位置进行缩放
接口定义: zoom(origin: { x: number; y: number }, direction: number): void;
参数定义: origin 指缩放发生的坐标(canvas 坐标),delta 指方向(放大 1,缩小-1)
changeImage 更换图片
接口定义: changeImage(img: HTMLImageElement | string, callback?: Function):void