裁剪组件弹框
<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-cropper ref="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; }, 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/204667.html原文链接：https://javaforall.net
