cropperjs 在 vue 中使用

官方文档

• 官网示例
• github 仓库

安装

npm install cropperjs

语法

new Cropper(element[, options])
// element：元素，HTMLImageElement 或 HTMLCanvasElement
// options：配置项，可选

官方例子

html

<!-- Wrap the image or canvas element with a block element (container) -->
<div>
  <img id="image" src="picture.jpg" />
</div>

css

/* Ensure the size of the image fit the container perfectly */
img {
  display: block;

  /* This rule is very important, please don't ignore this */
  max-width: 100%;
}

js

import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

const image = document.getElementById('image')
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x)
    console.log(event.detail.y)
    console.log(event.detail.width)
    console.log(event.detail.height)
    console.log(event.detail.rotate)
    console.log(event.detail.scaleX)
    console.log(event.detail.scaleY)
  },
})

 注意：要导入样式，不然不会生效，像下面这样 

参数 options

1. viewMode—定义 cropper 的视图模式

   类型:number；默认：0；可以使用 0,1,2,3； 

   

    0：没有限制，3 可以移动到 2 外。 1 : 3 只能在 2 内移动。 2：2 图片 不全部铺满 1 （即缩小时可以有一边出现空隙） 3：2 图片填充整个 1

2. dragMode —-定义 cropper 的拖拽模式。

   类型: String 默认: ‘crop’ 选项: ‘crop’: 可以产生一个新的裁剪框 3 ‘move’: 只可以移动 3 ‘none’: 什么也不处理

3. aspectRatio—-裁剪框的宽高比

   类型:number；默认：NAN； 在默认的时候。可以随意改变裁剪框的大小；我这里的设置的值为 16/9; 值为 1 时，正方形

4. data—如果您已经存储了以前的数据，那么在构建时将会自动将其传递给 setData 方法。(具体怎么用还不知道)

   类型:object；默认：null；

5. preview—-添加额外的元素(容器)以供预览

   类型：Element / String 默认：“ ”； 这里是一个 dom 元素。必须可以被 Document.querySelectorAll 获取到； preview:“.small”, HTML 结构：

   <div class="image-view"></div>
   

   .image-view {
     width: 190px;
     height: 160px;
     /* overflow 很重要 */
     overflow: hidden;
   }

   注意一定要设置 image-view 的宽高；最好和裁剪比例一致；还有如果要想正确的显示出裁剪的区域需要加上样式 overflow: hidden;

6. responsive—在调整窗口大小的时候重新渲染 cropper

   类型：Boolean 默认：true；

7. restore—在调整窗口大小后恢复裁剪的区域。

   类型：Boolean 默认：true；

8. checkCrossOrigin—-检查当前图像是否为跨域图像。

   类型：Boolean 默认：true；

9. checkOrientation—-检查当前图像的 Exif 定向信息。

   类型：Boolean 默认：true；

10. modal—显示图片上方的黑色模态并在裁剪框下面。

    类型：Boolean 默认：true；

11. guides—显示在裁剪框上方的虚线。

    类型：Boolean 默认：true；

12. center—裁剪框在图片正中心。

    类型：Boolean 默认：true；

13. highlight–在裁剪框上方显示白色的区域(突出裁剪框)。

    类型：Boolean 默认：true；

14. background–显示容器的网格背景。（就是后面的马赛克）

    类型：Boolean 默认：true；

15. autoCrop–初始化时，自动显示裁剪框

    类型：Boolean 默认：true；

16. autoCropArea–定义自动裁剪面积大小(百分比)和图片进行对比。

    类型：number 默认：0.8； 取值范围：0 ~ 1

17. movable–是否允许可以移动后面的图片

    类型：Boolean 默认：true；

18. rotatable–是否允许旋转图像。

    类型：Boolean 默认：true；

19. rotatable–是否允许旋转图像。

    类型：Boolean 默认：true；

20. zoomable–是否允许放大图像。

    类型：Boolean 默认：true；

21. zoomOnTouch–是否可以通过拖动触摸来放大图像。

    类型：Boolean 默认：true；

22. zoomOnWheel–是否可以通过移动鼠标来放大图像。

    类型：Boolean 默认：true；

23. wheelZoomRatio–用鼠标移动图像时，定义缩放比例。

    类型：Number 默认：0.1；

24. cropBoxMovable—是否通过拖拽来移动剪裁框。

    类型：Boolean 默认：true；

25. cropBoxResizable—是否通过拖动来调整剪裁框的大小。

    类型：Boolean 默认：true；

26. toggleDragModeOnDblclick—当点击两次时可以在“crop”和“move”之间切换拖拽模式，

    类型：Boolean 默认：true；

27. minContainerWidth—容器的最小宽度。

    类型：Number 默认：200；

28. minContainerHeight—容器的最小高度。

    类型：Number 默认：100；

29. minCanvasWidth—canvas 的最小宽度。

    类型：Number 默认：0；

30. minCanvasHeight—canvas 的最小高度。

    类型：Number 默认：0；

31. minCropBoxWidth—裁剪层的最小宽度。

    类型：Number 默认：0；

32. minCropBoxHeight—裁剪层的最小高度。

    类型：Number 默认：0；

33. ready—插件准备完成执行的函数（只执行一次）。

    类型：Function 默认：null；

34. cropstart—剪裁框开始移动执行的函数。

    类型：Function 默认：null；

35. cropmove—剪裁框移动时执行的函数。

    类型：Function 默认：null；

36. cropend—剪裁框移动结束执行的函数。

    类型：Function 默认：null；

37. crop—剪裁框发生变化执行的函数。

    类型：Function 默认：null；

38. zoom—剪裁框缩放的时候执行的函数。

    类型：Function 默认：null；