大家好,我是为前端娱乐圈操碎了心的小迷妹,每天推荐一个小工具/源码,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效率,实现不加班不熬夜不掉头发,是我的目标。在做web前端开发的时候,你一定遇到过这样的业务场景,上传用户头像的时候,需要将图片进行裁剪等操作,这个时候,我们一般会用到第三方插件。如果自己造轮子的话,就太慢了,耽误时间不说,搞不好还要留下来加班。这里就推荐一个简单易用的vue图片裁剪插件,支持移动图像,裁剪图片,放大缩小图片,上下左右移动,固定比例,固定尺寸,远程图片裁剪,只需要很少的代码就可以实现裁剪功能,也可以通过调整参数以适应你自己的业务需求。Github链接:https://github.com/acccccccb/vue-img-cutter是不是莫名的眼熟,是不是在几年前还用着jquery的时候在插件库里面看到过,小编曾经用过基于cropper.js的图片上传和裁剪的库,和这个简直是出自同一人之手,反正就是好用。兼容性也是挺好的哟,兼容IE9+,MSEdge,chrome,firefox等主流浏览器,还可以使用此配置工具进行更多个性化设置,不仅能实时预览,还可直接生成代码复制粘贴到你的项目。1:在自己的项目里面安装上传图片裁剪预览插件vue-img-cutternpm install vue-img-cutter --save-dev
![](https://filescdn.proginn.com/6a3e6a7240e372328879a3276d21d589/3ee61eef8d0d55aa7d03dd3c4c349635.webp)
安装完成之后可以看到package.json里面的关于插件vue-img-cutter版本信息
2:新建一个index.vue的组件,将ImgCutter.vue文件引入项目:import ImgCutter from 'vue-img-cutter'
export default {
components:{
ImgCutter
},
...
}
<ImgCutter v-on:cutDown="cutDown">
<button slot="open">选择图片</button>
</ImgCutter>
<template>
<div class="tab-container">
<ImgCutter v-on:cutDown="cutDown">
<button slot="open">选择图片</button>
</ImgCutter>
</div>
</template>
<script>
import ImgCutter from "vue-img-cutter";
export default {
components: {
ImgCutter,
},
};
</script>
![](https://filescdn.proginn.com/dd43973212fc3b8928f55c8862de4db7/c1a49338dc8aa44476e8ad56b9ba656f.webp)
今天的推荐不知道大家喜欢吗?如果你喜欢,请在文章底部留言和点赞,以表示对我的支持,你们的留言、点赞和转发关注是我持续更新的动力哦!