Ninjas Practicing Multidimensionality
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@redbuck/cropper

0.0.3 • Public • Published

轻量截图库

使用

  1. 安装: npm install @redbuck/cropper 或者 yarn add @redbuck/cropper.
  2. 引入:
    1. 模块化 commonjs: const Cropper = require('@redbuck/cropper'). ES6 module: import Cropper from "@redbuck/cropper".
    2. CDN 页面中添加<script type="text/javascript" src="to/path/cropper.js"></script>
  3. 使用: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

Install

npm i @redbuck/cropper

DownloadsWeekly Downloads

3

Version

0.0.3

License

ISC

Unpacked Size

115 kB

Total Files

25

Last publish

Collaborators

  • avatar