@redbuck/cropper

轻量截图库

使用

• 安装: 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>
• 使用: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