Vue 上传图片裁剪

裁剪使用的是vue-cropper。
效果图如下：

裁剪组件弹框

<template><div class="image-cropper-modal"><el-dialog:visible="visible":append-to-body="true":close-on-click-modal="false":title="$t('common.cropImage')"width="700"class="image-cropper-dialog"@close="visible = false"><vue-cropperref="imageCropper":img="url":auto-crop-width="autoCropWidth":auto-crop-height="autoCropHeight":auto-crop="true":fixed="false":fixed-number="[1, 1]":fixed-box="true":output-size="1"output-type="png"/><template #footer><span class="dialog-footer"><el-button v-t="'common.cancel'" class="common-btn cancel" @click="onCancel" /><el-button v-t="'common.save'" class="common-btn confirm" type="primary" @click="onConfirm" /></span></template></el-dialog></div>
</template>
<script>
import { VueCropper } from 'vue-cropper';
export default {name: 'ImageCropperModal',components: {VueCropper,},props: {visible: {type: Boolean,default: false,},url: {type: String,default: '',},autoCropWidth: {type: String,default: `${104 * 4}`,},autoCropHeight: {type: String,default: `${104 * 4}`,},},methods: {onCancel() {this.$emit('cancel');},onConfirm() {this.$refs.imageCropper.getCropBlob((blob) => {this.$emit('confirm', blob);});},},
};
</script>
<style lang="scss" scoped>
.image-cropper-dialog {.vue-cropper {height: 500px;}
}
</style>

使用

<image-cropper-modal:visible="cropperVisible":url="file":auto-crop-width="autoCropWidth":auto-crop-height="autoCropHeight"@cancel="cropperVisible = false"@confirm="onConfirm"
/>

上传图片之后，进行转换、裁剪

async onUpload() {const fileReader = new FileReader();fileReader.readAsDataURL(files[0]);fileReader.onload = () => {this.file = fileReader.result;this.cropperVisible = true;};
},
async onConfirm(file) {file.name = this.files[0].name;await this.uploadFiles([file]);this.cropperVisible = false;
},

Vue 上传图片裁剪相关推荐

VUE图片裁剪组件,基于VueCropper
VUE图片裁剪组件,基于VueCropper 搬砖的同志麻烦点个赞支持下效果图第一步安装vue-cropper插件 npm install vue-cropper 第二步创建组件,把下面的代码复制 ...
vue-avatar-tailor，vue头像裁剪组件
项目简介本组件是vue下的头像裁剪组件,可以直接拷贝代码使用,无需安装依赖使用九宫格进行裁剪,自由选择裁剪区域. 实时预览裁剪后效果. 可以将裁剪好的图片,导出为封装好的file文件,直接上传到服 ...
vue 上传图片视频组件，可拍照选择照片，解决苹果手机拍照旋转问题
vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题参考文章: (1)vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题 (2)https://www.cnblogs. ...
vue上传图片组件编写
点击打开源码 https://github.com/317482454/vue_upload 在线查看地址:http://jqvue.com/demo/vue_upload/demo.html 编写一 ...
VUE图片裁剪功能vue-img-cutter
VUE图片裁剪功能vue-img-cutter 前言: 演示地址兼容IE9+,MSEdge,Chrome,Firefox 两种展现形式,行内或弹窗可旋转.缩放图片任意比例.大小裁剪固定比例.大 ...
vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
vue图片裁剪组件_Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
Vue上传图片（只能上传一个）及可替换
手摸手教你实现vue上传图片-头像,只能上传一张且可重复替换! vue结合element-ui实现上传头像图片话不多说直接上图 . 初始化页面样式可更改哈代码如下 <div style=&q ...
前后端结合实现Vue上传图片并预览效果【Node+Mysql+Vue+Express】
一.话不多,先看效果: 大家好呀,⭐⭐⭐⭐⭐,秉着分享快乐的原则,我来啦~ 很久以前我写过一篇vue上传图片并显示的文章-> 鼠标点击这里~ 但是上次只是写了前端的,并没有把图片存储在服务器 ...
Vue上传图片并预览(好)
原文地址:Vue上传图片并预览_as_64的博客-CSDN博客_vue将文件上传的照片预览 1.input用来接收图片,img用来显示图片,让input变成透明并置于img上 <input cl ...

Vue 上传图片裁剪

Vue 上传图片裁剪相关推荐

最新文章

热门文章