Vue使用Vue-cropper实现图片裁剪

前言

这两天想给图片添加一个图片裁剪的功能，因为之前的图片都是直接上传的，很多图片肯定在前台显示的时候，都不能很好的达到我们想要的效果，因此就需要我们在对个别图片进行细微调整，已达到我们的目的。

图片裁剪

关于图片裁剪我在github中找到了两种

• vue-cropper
• vue-image-crop-upload

这两种的样式分别如下所示：

首先是vue-image-crop-upload，我们能够发现其实这个截图有点类似于我们需要裁减头像的时候，才需要使用的，而针对于特定的矩形，可能没办法达到我们的效果

其次我们再看 vue-cropper图片裁剪，它是可以根据我们的实际需求进行裁剪，所以综上可能下面这块比较适合现在的项目需求，但是我们也可以使用上面的这款作为头像裁剪的组件。

裁剪后的效果：

引入Vue-cropper

安装依赖

npm install vue-cropper --save

页面引入

import { VueCropper } from 'vue-cropper'

申明组件

components: {
    VueCropper,
 },

完整代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。