史上最全基于vue的图片裁剪vue |
您所在的位置：网站首页 › 裁剪工具怎么自由裁剪视频教程 › 史上最全基于vue的图片裁剪vue |
史上最全基于vue的图片裁剪vue
|
史上最全基于vue的图片裁剪vue-cropper使用
基于vue的图片裁剪vue-cropper新的需求vue-cropper官网代码拷贝
最后
基于vue的图片裁剪vue-cropper
最近小编好久没有写博客了，今天发现突然涨了好几个粉，特别的开心，为了回馈大家，我今天准备了一点点小小的心意，最近工作实在太忙，难得抽空更博了，不过最近小编会快马加鞭努力更博的。 新的需求最近小编遇到一个图片裁剪的需求，对于一个前端小白的我来说，搞这些花里胡哨的东西，走了很多弯路，各种百度，改了又改，实则不易啊。废话不多说上大图：
链接：https://github.com/xyxiao001/vue-cropper 安装：npm install vue-cropper 或者 yarn add vue-cropper 代码拷贝废话不多说，代码也不多敲，相信大家和我一样，能粘贴绝不手敲，哈哈。 组件封装CropperImage.vue 选择封面 放大 缩小 ↺ 左旋转 ↻ 右旋转 上传封面 import { VueCropper } from 'vue-cropper' export default { name: "CropperImage", components: { VueCropper }, props:['Name'], data() { return { name:this.Name, previews: {}, option:{ img: '', //裁剪图片的地址 outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1) outputType: 'jpeg', //裁剪生成图片的格式（jpeg || png || webp） info: true, //图片大小信息 canScale: true, //图片是否允许滚轮缩放 autoCrop: true, //是否默认生成截图框 autoCropWidth: 230, //默认生成截图框宽度 autoCropHeight: 150, //默认生成截图框高度 fixed: true, //是否开启截图框宽高固定比例 fixedNumber: [1.53, 1], //截图框的宽高比例 full: false, //false按原比例裁切图片，不失真 fixedBox: true, //固定截图框大小，不允许改变 canMove: false, //上传图片是否可以移动 canMoveBox: true, //截图框能否拖动 original: false, //上传图片按照原始比例渲染 centerBox: false, //截图框是否被限制在图片里面 height: true, //是否按照设备的dpr 输出等比例图片 infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高 maxImgSize: 3000, //限制图片最大宽度和高度 enlarge: 1, //图片根据截图框输出比例倍数 mode: '230px 150px' //图片默认渲染方式 } }; }, methods: { //初始化函数 imgLoad (msg) { console.log("工具初始化函数====="+msg) }, //图片缩放 changeScale (num) { num = num || 1 this.$refs.cropper.changeScale(num) }, //向左旋转 rotateLeft () { this.$refs.cropper.rotateLeft() }, //向右旋转 rotateRight () { this.$refs.cropper.rotateRight() }, //实时预览函数 realTime (data) { this.previews = data }, //选择图片 selectImg (e) { let file = e.target.files[0] if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) { this.$message({ message: '图片类型要求：jpeg、jpg、png', type: "error" }); return false } //转化为blob let reader = new FileReader() reader.onload = (e) => { let data if (typeof e.target.result === 'object') { data = window.URL.createObjectURL(new Blob([e.target.result])) } else { data = e.target.result } this.option.img = data } //转化为base64 reader.readAsDataURL(file) }, //上传图片 uploadImg (type) { let _this = this; if (type === 'blob') { //获取截图的blob数据 this.$refs.cropper.getCropBlob(async (data) => { let formData = new FormData(); formData.append('file',data,"DX.jpg") //调用axios上传 let {data: res} = await _this.$http.post('/api/file/imgUpload', formData) if(res.code === 200){ _this.$message({ message: res.msg, type: "success" }); let data = res.data.replace('[','').replace(']','').split(','); let imgInfo = { name : _this.Name, url : data[0] }; _this.$emit('uploadImgSuccess',imgInfo); }else { _this.$message({ message: '文件服务异常，请联系管理员！', type: "error" }); } }) } }, }, } .cropper-content{ display: flex; display: -webkit-flex; justify-content: flex-end; .cropper-box{ flex: 1; width: 100%; .cropper{ width: auto; height: 300px; } } .show-preview{ flex: 1; -webkit-flex: 1; display: flex; display: -webkit-flex; justify-content: center; .preview{ overflow: hidden; border:1px solid #67c23a; background: #cccccc; } } } .footer-btn{ margin-top: 30px; display: flex; display: -webkit-flex; justify-content: flex-end; .scope-btn{ display: flex; display: -webkit-flex; justify-content: space-between; padding-right: 10px; } .upload-btn{ flex: 1; -webkit-flex: 1; display: flex; display: -webkit-flex; justify-content: center; } .btn { outline: none; display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; -webkit-appearance: none; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0; -webkit-transition: .1s; transition: .1s; font-weight: 500; padding: 8px 15px; font-size: 12px; border-radius: 3px; color: #fff; background-color: #409EFF; border-color: #409EFF; margin-right: 10px; } }注意：裁剪组件的基础配置option，小编这里配置了官方所给的所有基础配置，大家可以按需配置。 新建Tailoring.vue 调用封装好的组件: 这里我们先简单说一下思路，通过按钮触发事件打开我们的剪裁窗口，选择图片，点击上传之后，将地址回调回来，拿到地址就可以处理我们的业务了，比如随着表单一起将回调地址存入数据库等等。 如果你觉得DT_小白文章写的还不错，请微信搜索并关注「 Java云社 」微信公众号，和DT_小白一起学习Java、分布式、微服务、大数据技术，并且「 Java云社 」收集了大量的大厂面试题目集，等你来挖掘，为了提升自己的能力，实现技术能力的飞跃，每天定时更新超硬核技术干货，我在「 Java云社 」等您的加入，让我们共同学习吧！
|
Tailoring.vue：
【本文地址】
今日新闻 |
推荐新闻 |