介绍
vue-advanced-cropper 是一个基于 Vue.js 和 Croppie 的图片剪裁组件，支持拖动和缩放。使用方便，适用于各种实际场景。
安装
首先，我们需要在项目中安装 vue-advanced-cropper。
在命令行中运行：
npm install --save vue-advanced-cropper
使用
我们将要展示如何使用 vue-advanced-cropper。
在前端框架中的使用可以参考如下代码：
-- -------------------- ---- -------
----------
-----
---------------------
---------------
-------------------
--------------
--
---- --------------- --
------- ----------------------- --------------
------
-----------
--------
------ ------------------ ---- ----------------------
------ ------- -
------ -
------ -
--------- ---
-------- ---
-
--
----------- -
------------------
--
-------- -
--------------- -
------------- - -------
--
----------- -
---------------------------------- -- -
--------------------
--
--
--
--------- -
------------ - --------------------------
--
-
---------Props
vue-advanced-cropper 组件接受以下 props：
| Prop 属性 | 数据类型 | 默认值 | 说明 |
|---|---|---|---|
| src | String | '' | 要剪裁的图片地址 |
| preview | String | '' | 显示预览图片的选择器 |
| viewport | Object | { width: null, height: null, type: 'square' } |
剪裁的视口选项（默认剪裁区域是正方形） |
| boundary | Object | { width: null, height: null } |
剪裁的限制选项 |
| type | String | 'canvas' | 输出的图片格式 |
| quality | Number | 0.75 | 输出图片的质量 |
| zoomStep | Number | 0.1 | 缩放步进 |
| minZoom | Number | 0.1 | 缩放最小比例 |
| maxZoom | Number | 3 | 缩放最大比例 |
| enableZoom | Boolean | true | 是否启用缩放 |
| enableMove | Boolean | true | 是否启用移动 |
| enableResize | Boolean | true | 是否启用重置 |
| enableRotation | Boolean | true | 是否启用旋转 |
事件
vue-advanced-cropper 组件提供了以下事件：
| 事件名称 | 说明 |
|---|---|
| crop | 剪裁完成并输出图片时触发 |
示例
以下示例展示了一个 Vue.js 应用程序使用 vue-advanced-cropper 剪裁图片的过程。
-- -------------------- ---- -------
----------
-----
---------------------
---------------
--------------------
--------------------
--------------------
------------------
------------------
------------------------
------------------------
----------------------------
--------------------------------
-------------------
--------------
-------------
--
---- --------------- --
------- ----------------------- --------------
------
-----------
--------
------ ------------------ ---- ----------------------
------ ------- -
------ -
------ -
--------- ---
--------- - ------ ---- ------- ---- ----- -------- --
--------- - ------ ---- ------- --- --
--------- ----
-------- ----
-------- --
----------- -----
----------- -----
------------- -----
--------------- -----
-------- ---
-
--
----------- -
-------------------
--
-------- -
--------------- -
------------- - -------
--
----------- -
---------------------------------- -- -
--------------------
--
--
--
--------- -
------------ - --------------------------
--
-
---------小结
vue-advanced-cropper 是一个非常实用的 Vue.js 图片剪裁组件，它让你很容易地将图片剪裁和重置大小。希望这篇文章能够帮助你更好地了解和使用 vue-advanced-cropper。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedab1ab5cbfe1ea0610665