1.0.6 • Published 4 years ago
lego-cropper v1.0.6
LegoSimpleCrop
移动端Web模仿ios的裁剪组件
功能
- 裁剪图片支持任意角度旋转
- 移动端缩放以双指中心为基准点
- 支持边界判断、当裁剪框里出现空白时，图片自动吸附至完全填满裁剪框
- 拖拽回弹、惯性滚动
- 操作体验媲美原生客户端
本项目参考了SimpleCrop(https://github.com/newbieYoung/Simple-Crop)
安装
npm install LegoSimpleCrop使用
config
| 参数 | 默认 | 说明 |
|---|---|---|
| container | document.body | 组件注入Dom |
| src | null | 裁剪图片地址 |
| bgImage | null | 背景图片地址 |
| maskColor | 'rgba(0,0,0,1)' | 背景遮罩颜色,背景图片优先级高于背景遮罩色 |
| imageQuality | 0.92 | 输出图像质量 |
| crop | obj | 裁剪框参数 |
| rotateSlider | obj | 刻度盘参数 |
| frameLine | obj | 辅助线参数 |
crop
| 参数 | 默认 | 说明 |
|---|---|---|
| width | 1080 | 裁剪框宽度 |
| height | 1080 | 裁剪框高度 |
| top | 0 | 裁剪框偏移顶部距离(中心点为container中心) |
| left | 0 | 裁剪框偏移左边距离(中心点为container中心) |
| cropSizePercent | 0.5 | 裁剪框占页面百分比(类似transform:scale的缩放) |
rotateSlider
| 参数 | 默认 | 说明 |
|---|---|---|
| showSlider | true | 是否显示刻度盘 |
| showNumber | true | 是否显示刻度盘度数 |
| startAngle | -30 | 刻度盘开始角度 |
| endAngle | 30 | 刻度盘结束角度 |
| gapAngle | 1 | 刻度盘间隔角度 |
| lineationItemWidth | 7.969 | 单个刻度盘宽度，单位像素 |
frameLine | 参数 | 默认 | 说明 | ----- | :-------- | :--------- | showLine | true | 是否显示辅助线 | lineWidth | 15 | 辅助线宽度
Events
| 名称 | 说明 |
|---|---|
| rotate | 旋转图片,参数(deg) |
| setSize | 设置输出裁剪框宽高,用于重置比例,参数(width,height,cropSizePercent) |
| resetRotate | 重置图片角度 |
| crop | 输出裁剪图片,参数(isCanvas) 是否输出为canvas |
| destory | 销毁已有参数&事件监听 |
import LegoCropper from 'LegoCropper'
import 'LegoCropper/dist/index.css'
const config = {
container: '.home,
src: 'http://legox.yy.com/assets/lab/zhangfuyuan/test2.jpg',
bgImage: 'http://legox.yy.com/assets/lab/zhangfuyuan/images.jpg',
crop: {
width: 1680,
height: 1680,
top: 100,
left: 0,
cropSizePercent: 0.5
},
rotateSlider: {
showSlider: true,
showNumber: true
},
frameLine: {
showLine: true,
lineWidth: 25
},
maskColor: 'rgba(0,0,0,1)'
}
let LegoCropper = new LegoCropper(config)
LegoCropper.rotate(60)
LegoCropper.setSize(1620,1080)
LegoCropper.resetRotate()
let output = LegoCropper.crop()
LegoCropper.destory()