vue做图片裁剪—

这里使用的是vue-cropper 官方文档以及案例在这里

先安装

npm install vue-cropper

裁剪图片组件

注意事项：

1.代码中设置的是只有正确的url是才展示，裁剪组件

2.需要给容器固定高度

3.props传值可自行加减

<template><div class="Cropper" v-show="cropperImg"><div class="cropper-container"><div class="cropper-el"><vue-cropperref="cropper":img="cropperImg":output-size="option.size":output-type="option.outputType":info="true":full="option.full":fixed="fixed":fixed-number="fixedNumber":can-move="option.canMove":can-move-box="option.canMoveBox":fixed-box="option.fixedBox":original="option.original":auto-crop="option.autoCrop":auto-crop-width="optionWidth":auto-crop-height="optionHeigth":center-box="option.centerBox"@real-time="realTime":high="option.high"@img-load="imgLoad"mode="cover":max-img-size="option.max"></vue-cropper></div><div class="bottom"><a-button @click="clearfinish">取消裁剪</a-button><a-button type="primary" @click="finish">确定裁剪</a-button></div></div></div>
</template><script>
import { VueCropper } from 'vue-cropper'
export default {name: 'Cropper',components: {VueCropper},props: {cropperImg: {type: String},optionWidth: {// 裁剪框宽default: 900},optionHeigth: {// 裁剪高宽default: 600},fixedNumber: {default: () => [1.5, 1]}},data() {return {previews: {},option: {img: this.cropperImg,size: 1, // 裁剪生成图片的质量full: false,outputType: 'png', // 裁剪生成图片的格式 默认jpgcanMove: true, // 上传图片是否可以移动fixedBox: false,original: false,canMoveBox: true,autoCrop: true,// 只有自动截图开启 宽度高度才生效autoCropWidth: 900,autoCropHeight: 600,centerBox: true,high: true,max: 99999},show: true,fixed: true, // 是否开启截图框宽高固定比例 (默认:true)//   fixedNumber: [1.5, 1], // 截图框的宽高比例,modelSrc: ''}},methods: {// 裁剪时触发的方法，用于实时预览realTime(data) {this.previews = data},// 图片加载的回调 imgLoad 返回结果success, errorimgLoad(e) {if (e === 'success') {console.log('裁剪成功')}},// 确定裁剪finish() {this.$refs.cropper.getCropBlob((data) => {let img = window.URL.createObjectURL(data)this.modelSrc = imgconst files = new window.File([data], Date.parse(new Date()) + '.png', { type: data.type })files.url = window.URL.createObjectURL(data)this.$emit('getCrofile', files)})},clearfinish() {this.$emit('clear')}}
}
</script><style lang="scss" scoped>
.Cropper {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 999999;background-color: #fff;.cropper-el {width: 70vw;height: 70vh;margin: 30px auto;}.bottom {width: 100%;text-align: center;}
}
</style>

具体使用（这里使用的是antd）

<!-- 上传组件（文件上传待测试） -->
<template><div class="img-upload" ref="upload"><a-uploadref="uploadDom"v-viewer@change="handleSuccess":file-list="config.fileList":headers="config.header":data="data":action="config.baseUrl":accept="config.accept"list-type="picture-card":before-upload="beforeUpload":showUploadList="false":multiple="false":disabled="disabled"><div>裁剪上传</div></a-upload><cropperImgVue :cropperImg="url" @getCrofile="getCrofile" @clear="clear" :optionWidth="optionWidth" :optionHeigth="optionHeigth" :fixedNumber="fixedNumber" /></div>
</template><script>
import { getToken } from '@/util/method'
// import { uploadImgUrl } from '@/util'
import cropperImgVue from '../cropperImg.vue'
export default {name: 'upload',components: {cropperImgVue},props: {value: {type: Array,default: () => []}, // 上传成功图片地址disabled: {type: Boolean,default: false}, // 是否禁用action: {type: String,default: ''}, // 上传接口地址data: {type: Object,default: () => {return {fileType: 1}}}, // 给后端带的参数type: {type: String,default: 'image'}, // 上传类型 image/fileoptionWidth: {// 裁剪框宽default: 900},optionHeigth: {// 裁剪高宽default: 600},fixedNumber: {default: () => [1.5, 1]}},data() {return {isAction: false, // 是否是上传图片的操作urls: [], // 图片数据limit: 1,config: {header: {Authorization: getToken()},baseUrl: '',fileList: [],listType: 'picture-card', // 上传成功展示样式 默认展示图片accept: 'image/*' // 上传类型限制},url: ''}},methods: {// 上传 失败/成功/删除handleSuccess(file) {return false},// 裁剪beforeUpload(file) {console.log('裁剪')this.url = URL.createObjectURL(file)console.log(this.url)return false},getCrofile(file) {this.$emit('getCrofile', file)this.url = ''},clear() {this.url = ''}}
}
</script><style lang="scss" scoped>
/deep/ .ant-upload-list-item-info,
.img-upload {margin: 0;
}
</style>

效果图

vue做图片裁剪——vue-cropper相关推荐

史上最全基于vue的图片裁剪vue-cropper使用
史上最全基于vue的图片裁剪vue-cropper使用基于vue的图片裁剪vue-cropper 新的需求 vue-cropper官网代码拷贝最后基于vue的图片裁剪vue-cropper 最 ...
android图片布局填冲满,Android图片裁剪库——cropper使用，完美解决图片填充不满布局问题...
前些时间请了一个月假,远程办公,期间项目主要做图片裁剪,脑子里第一反应就是github上开源裁剪库,试了排名的前几个,其中不是UI定制度太低就是裁剪效果不怎么样.当然你也可以直接intent一下系统的 ...
vue实现图片裁剪后上传
一.背景目前负责的系统(商城后台管理系统)里面有这么一个需求,为了配合前台的展示,上传的商品图片比较必须是1:1的正方形.(其它地方有时会有5:4或者16:9的需求,但较少).所以需要对上传的图片先 ...
简单的移动端图片裁剪vue插件[旋转，平移，缩放，印花]
Continuing the discussion from Vuex 插件自动缓存store指定数据(配置最简,性能最佳): ============================分割线=:jo ...
Vue - 实现图片裁剪功能，并上传到服务器（内置第三方最优秀的裁剪图片组件，上传到服务器功能）干净整洁无 BUG 的示例源码与超详细的注释，兼容任意浏览器
前言您可以滑动到文章最底部,直接克隆完整示例 Gitee 仓库,与本文教程最终效果一致. 在项目开发中,您难免会遇到图片上传到服务器之前,用户可进行裁剪的需求, 在看了网上大部分教程后,代码都非常乱 ...
基于vue的图片裁剪框的实现
1.基于vue建设一个裁剪框全文附录我会放到最后,有需要的小伙伴自取 ## 1.1在没有添加图片的时候显示如上图的css样式 <label class="h-photo-left&q ...
一个简单的 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=" ...

vue做图片裁剪——vue-cropper

vue做图片裁剪——vue-cropper相关推荐

最新文章

热门文章