先进的库使您有机会创建自己的裁剪器，以适合任何网站设计。

特征：

• 完全可定制
• 行动支援
• 画布和坐标
• 高级功能

安装和下载：

# Yarn
$ yarn add vue-advanced-cropper

# NPM
$ npm install vue-advanced-cropper --save

使用：

import Vue from 'vue'
import { Cropper } from 'vue-advanced-cropper'

new Vue({
  el: '#app',
  data: {
    img: 'https://images.pexels.com/photos/226746/pexels-photo-226746.jpeg'
  },
  methods: {
    change({coordinates, canvas}) {
      console.log(coordinates, canvas)
    }
  },
  components: {
    Cropper
  }
})

<div id="app">
<cropper
classname="cropper"
:src="img"
:stencilProps="{
aspectRatio: 10/12
}"
@change="change"
></cropper>
</div>

/*
  也许你需要设置裁剪器大小或其容器大小的限制
否则，裁剪图像将尝试填充所有可用空间
*/
.cropper {
  height: 600px;
  background: #DDD;
}

变更日志：

v1.7.0 (06/08/2021)

• 添加“fillColor”画布属性

v1.6.0 (05/25/2021)

• 添加在画布道具中设置“高度”和“宽度”属性的可能性

v1.5.3 (05/13/2021)

• 为 onFailLoadImage 添加保护以防止发出冗余事件

v1.5.1 (04/27/2021)

• 修复调整模板大小，防止坐标大于可见区域的情况

v1.5.0 (04/12/2021)

• 添加调整结果画布大小的可能性

v1.4.1 (04/08/2021)

• 通过右键，中键等防止移动处理程序或模板。

v1.4.0 (04/06/2021)

• 修复 checkOrientation 道具并防止在画布等于“false”时向图像添加 crossorigin 属性

v1.3.4（03/24/2021）

• 如果图像尺寸不正确，则禁止计算尺寸限制

v1.3.3（03/23/2021）

• 如果模具尺寸与其他尺寸限制冲突，请修复旋转错误

v1.3.2（03/11/2021）

• 在props change上添加change事件的发出

v1.3.0（02/06/2021）

• 添加实验性自动预览尺寸计算

v1.2.0（01/16/2021）

• 添加常规预览组件

v1.0.2（01/13/2021）

• 添加裁剪器边界的舍入

v1.0.1（12/24/2020）

• 修复过渡错误

v0.20.1（2020年12月20日）

• 将过渡添加到“调整大小”和“缩放”方法

v0.19.2（2020年12月14日）

• 修复IE 11错误

v0.19.1（2020年12月13日）

• 修复PreviewResult班次计算错误

v0.18.1（12/09/2020）

• 重构代码

v0.18.0（12/08/2020）

• 重构代码

v0.17.7（2020年11月1日）

• 代码重构

v0.17.3（09/14/2020）

• 外部化算法

v0.17.2（09/13/2020）

• 外部化算法

v0.17.2（09/05/2020）

• 修正候选人选择算法

v0.17.1（09/03/2020）

• 删除冗余代码

v0.16.10（09/01/2020）

• 重写图像大小调整/移动的内部

v0.16.9（2020年7月25日）

• 减小模板的最小尺寸

v0.16.6（2020年6月25日）

• 防止黑色填充画布

---

官网：https://github.com/Norserium/vue-advanced-cropper

演示：https://www.vue365.cn/code_demo.php?id=423

GitHub下载：https://github.com/Norserium/vue-advanced-cropper/archive/master.zip