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()