Vue.js的高级图像裁剪库 - vue-advanced-cropper

Vue.js的高级图像裁剪库 - vue-advanced-cropper
插件名称 vue-advanced-cropper
版本号 v1.7.0
发布时间 2020年5月4日
插件作者 Norserium

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

特征:

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

安装和下载:

# 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日)

  • 防止黑色填充画布