图片裁剪vue-cropper

使用ElemnetUi的上传组件搭配vue-cropper实现上传图片的裁剪

网上搜到的代码缺胳膊少腿很多坑

HTML

<template><div class='demo'><!-- element 上传图片按钮 --><el-uploadclass="avatar-uploader"action="":show-file-list="false":auto-upload="false":on-change='changeUpload'><img v-if="banner" :src="banner" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload><!-- vueCropper 剪裁图片实现--><el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body><div class="cropper-content"><div class="cropper" style="text-align:center"><vueCropperref="cropper":img="option.img":outputSize="option.size":outputType="option.outputType":info="true":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":fixed="option.fixed":fixedNumber="option.fixedNumber":centerBox="option.centerBox":infoTrue="option.infoTrue":fixedBox="option.fixedBox"@realTime="realTime"></vueCropper></div></div><div slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="finish" :loading="loading">确认</el-button></div></el-dialog></div>
</template>

script

<script>
import { client } from '@api/newApi.js'
export default {data() {return {// 裁剪组件的基础配置optionoption: {img: '', // 裁剪图片的地址info: true, // 裁剪框的大小信息outputSize: 0.8, // 裁剪生成图片的质量outputType: 'jpeg', // 裁剪生成图片的格式canScale: false, // 图片是否允许滚轮缩放autoCrop: true, // 是否默认生成截图框// autoCropWidth: 300, // 默认生成截图框宽度// autoCropHeight: 200, // 默认生成截图框高度fixedBox: true, // 固定截图框大小 不允许改变fixed: true, // 是否开启截图框宽高固定比例fixedNumber: [10.8, 1.6], // 截图框的宽高比例full: true, // 是否输出原图比例的截图canMoveBox: false, // 截图框能否拖动original: false, // 上传图片按照原始比例渲染centerBox: false, // 截图框是否被限制在图片里面infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高},dialogVisible: false,//裁剪弹窗loading: false, //裁剪请求loading按钮fileinfo:[], //接收element上传前的file类型数据banner:'',//裁剪后的url}},methods: {// 实时预览函数 realTime(data) { this.previews = data },// 上传按钮   限制图片大小changeUpload(file, fileList) {const isLt5M = file.size / 1024 / 1024 < 5if (!isLt5M) {this.$message.error('上传文件大小不能超过 5MB!')return false}//这边将file类型的文件赋值给fileinfothis.fileinfo = file.rawconsole.log(this.fileinfo)let res = URL.createObjectURL(this.fileinfo)console.log(res)// 上传成功后将图片地址赋值给裁剪框显示图片this.$nextTick(() => {this.option.img = resthis.dialogVisible = true})},// 点击裁剪，这一步是可以拿到处理后的地址finish() {this.$refs.cropper.getCropBlob((data) => {//裁剪图片后的blod数据let file = new File([data], this.fileinfo.name, {type: this.fileinfo.type, lastModified: Date.now()});let formData = new FormData()formData.append('groupId',this.$cookies.get("CookieGroupId"))formData.append('file',file)this.loading = trueclient(formData).then(res=>{this.banner = res.data.data.urlthis.loading = falsethis.dialogVisible = false})})}}
}
</script>

css

<style lang='scss' rel='stylesheet/scss'>
// 截图 样式给不上会出现NAN*NAN的情况
.cropper-content {.cropper {width: auto;height: 300px;}
}
.demo{.avatar-uploader{display: flex;align-items: center;.el-upload {float: left;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}}.el-upload:hover {border-color: #409EFF;}.el-upload:hover {border-color: #409EFF;}}.avatar {width: 521px;height: 77px;display: block;}
}
</style>

图片裁剪vue-cropper相关推荐

简单的移动端图片裁剪vue插件[旋转，平移，缩放，印花]
Continuing the discussion from Vuex 插件自动缓存store指定数据(配置最简,性能最佳): ============================分割线=:jo ...
一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...
input file图片上传（使用OSS Javscrtipt 上传到服务器）以及图片裁剪（cropper.js）
一.图片上传 (1)使用 <input type="file" accept="image/*" name="file" @chang ...
头像上传和图片裁剪功能(cropper.js)
<template><div class="user-profile"><input type="file" name=" ...
android图片布局填冲满,Android图片裁剪库——cropper使用，完美解决图片填充不满布局问题...
前些时间请了一个月假,远程办公,期间项目主要做图片裁剪,脑子里第一反应就是github上开源裁剪库,试了排名的前几个,其中不是UI定制度太低就是裁剪效果不怎么样.当然你也可以直接intent一下系统的 ...
图片裁剪 cropper.js 上传组件封装 vue
//HTML cropper.js 文档地址: https://github.com/fengyuanchen/cropperjs/blob/master/README.md <template ...
史上最全基于vue的图片裁剪vue-cropper使用
史上最全基于vue的图片裁剪vue-cropper使用基于vue的图片裁剪vue-cropper 新的需求 vue-cropper官网代码拷贝最后基于vue的图片裁剪vue-cropper 最 ...
vue+图片裁剪vue-cropper以及api
前言: 因为项目需要,需要实现一个上传完图片,对图片进行二次处理的需求,就使用了vue-cropper来实现这个功能,总的来说还是感觉非常不错的软件,这里分享下我的使用方法,以及vue-cropper ...
VUE图片裁剪组件,基于VueCropper
VUE图片裁剪组件,基于VueCropper 搬砖的同志麻烦点个赞支持下效果图第一步安装vue-cropper插件 npm install vue-cropper 第二步创建组件,把下面的代码复制 ...
vue实现图片裁剪后上传
一.背景目前负责的系统(商城后台管理系统)里面有这么一个需求,为了配合前台的展示,上传的商品图片比较必须是1:1的正方形.(其它地方有时会有5:4或者16:9的需求,但较少).所以需要对上传的图片先 ...

图片裁剪vue-cropper

使用ElemnetUi的上传组件搭配vue-cropper实现上传图片的裁剪

网上搜到的代码缺胳膊少腿很多坑

图片裁剪vue-cropper相关推荐

最新文章

热门文章

图片裁剪vue-cropper

使用ElemnetUi的上传组件搭配vue-cropper实现上传图片的裁剪

网上搜到的代码 缺胳膊少腿 很多坑

图片裁剪vue-cropper相关推荐

最新文章

热门文章

网上搜到的代码缺胳膊少腿很多坑