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

变更日志：

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日）

• 防止黑色填充画布

特征：

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

安装和下载：

# 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;
}