网络前端开发招聘_b站推广费用一般多少_关键词优化营销_网络营销

前言

我们需要上传图片，然后弹框进行裁剪（放大、缩小）。

效果

实现

裁剪组件.vue

<template><div><!--裁剪图片--><el-dialog v-model="tailorDialogVisible" @open="onTailorDialogOpen" @close="onTailorDialogCancel" title="编辑图片" width="680" align-center><div style=" width: 550px; height: 450px; margin: 30px auto;" v-loading="loading"element-loading-text="Loading..."><vue-cropper ref="cropper":img="tailorOption.img":output-type="tailorOption.outputType":full="tailorOption.full":auto-crop="tailorOption.autoCrop":auto-crop-width="tailorOption.autoCropWidth":auto-crop-height="tailorOption.autoCropHeight":center-box="tailorOption.centerBox":max-img-size="tailorOption.max"mode="cover"@imgLoad="onTailorLoad"></vue-cropper></div><div style="display: flex; margin: 0 200px; justify-content: center; align-items: center"><div style="width: 40px;text-align: left; cursor: pointer;"><!-- <el-icon @click="onScaleMinus(0.1)" :size="16"><Minus /></el-icon> --><span @click="onScaleMinus(0.1)">-号</span></div><div style="flex: 1"><el-slider v-model="tailorAmplificationValue" :min="1" :max="3" :step="0.1" @change="onChangTailorAmplificationSlider" /></div><div style="width: 40px;text-align: right; cursor: pointer;"><!-- <el-icon @click="onScaleAdd(0.1)" :size="16"><Plus /></el-icon> --><span @click="onScaleAdd(0.1)">+号</span></div></div><div style="display: flex; margin: 10px 200px 40px 200px; justify-content: center; align-items: center"><div style="width: 40px;text-align: left; cursor: pointer;"><span @click="onRotateLeft">左旋</span><!-- <el-icon @click="onRotateLeft" :size="16"><Plus /></el-icon> --><!-- <img @click="onRotateLeft" style="width: 14px; height: 14px" src="../../../public/img/recipeManage/left_rotate.png" alt=""> --></div><div style="flex: 1"><el-slider v-model="tailorSpinValue" :min="-180" :max="180" :step="90" @change="onChangTailorSpinSlider" /></div><div style="width: 40px;text-align: right; cursor: pointer;"><span @click="onRotateRight">右旋</span><!-- <el-icon @click="onRotateRight" :size="16"><Plus /></el-icon> --><!-- <img @click="onRotateRight" style="width: 14px; height: 14px" src="../../../public/img/recipeManage/right_rotate.png" alt=""> --></div></div><div style="padding-top: 20px;" class="recipeManage_border_top"><div style="display: flex; align-items: center; justify-content: center"><div><el-button type="primary" plain @click="onTailorDialogCancel">取消</el-button></div><div style="margin-left: 20px"><el-button type="primary" @click="onTailorDialogSubmit">确认</el-button></div></div></div></el-dialog></div>
</template><script setup>import 'vue-cropper/dist/index.css'import { VueCropper }  from "vue-cropper";// import { postImgData } from '@/api/base/public';import { ref, defineProps, toRefs, defineEmits } from 'vue';const emit = defineEmits(['close', 'submit']);const props = defineProps({tailorDialogImg: {default: ''},autoCropWidth: {default: 180},autoCropHeight: {default: 180},tailorDialogVisible: {type: Boolean,required: true,default: false},});const { tailorDialogVisible, tailorDialogImg, autoCropWidth, autoCropHeight } = toRefs(props);const loading = ref(false);// 裁剪图片const cropper = ref("");// const tailorDialogVisible = ref(visible.value);const tailorAmplificationValue = ref(0);const tailorSpinValue = ref(0);const tailorOption =  ref({img: "",full: false,outputType: 'png',autoCrop: true,autoCropWidth: 180,autoCropHeight: 180,centerBox: true,max: 99999,});// 放大let oldTailorAmplificationValue = 0;const onScaleAdd = (num) => {if (tailorAmplificationValue.value === 3) return;// tailorAmplificationValue.value = Number(parseFloat(tailorAmplificationValue.value + num).toFixed(1));tailorAmplificationValue.value = +(parseFloat(tailorAmplificationValue.value + num).toFixed(1));oldTailorAmplificationValue = tailorAmplificationValue.value;cropper.value.changeScale(tailorAmplificationValue.value);};const onScaleMinus = (num) =>  {if (tailorAmplificationValue.value === 1) return;tailorAmplificationValue.value = tailorAmplificationValue.value - num;oldTailorAmplificationValue = -tailorAmplificationValue.value;cropper.value.changeScale(-tailorAmplificationValue.value);};const onChangTailorAmplificationSlider = (value) => {if (oldTailorAmplificationValue > value) {cropper.value.changeScale(-value);} else {cropper.value.changeScale(value);}oldTailorAmplificationValue = value;};// 旋转let oldTailorRotateValue = 0;const onChangTailorSpinSlider = (value) => {if (value > 0) {cropper.value.rotateRight();} else {cropper.value.rotateLeft();}};const onRotateLeft = () => {if (cropper.value.rotate === -2) return false;cropper.value.rotateLeft();oldTailorRotateValue = cropper.value.rotate * 90console.log("===oldTailorRotateValue===", oldTailorRotateValue)tailorSpinValue.value = cropper.value.rotate * 90};const onRotateRight = () =>  {if (cropper.value.rotate === 2) return false;cropper.value.rotateRight();oldTailorRotateValue = cropper.value.rotate * 90console.log("===oldTailorRotateValue===", oldTailorRotateValue)tailorSpinValue.value = cropper.value.rotate * 90};const onTailorDialogOpen = () => {console.log("===弹框打开===");loading.value = true;tailorOption.value.img = tailorDialogImg.value;tailorOption.value.autoCropWidth = autoCropWidth.value;tailorOption.value.autoCropHeight = autoCropHeight.value;};const onTailorLoad = (msg) => {console.log("===msg===", msg)loading.value = false;};const onTailorDialogCancel = () => {emit('close');loading.value = false;tailorOption.value.img = "";tailorAmplificationValue.value = 0;tailorSpinValue.value = 0;};const onTailorDialogSubmit = () => {cropper.value.getCropData(data => {tailorAmplificationValue.value = 0;tailorSpinValue.value = 0;tailorOption.value.img = "";emit('submit', data);})// cropper.value.getCropBlob(data => {//   // 创建 FormData 对象并添加 Blob 对象//   const formData = new FormData();//   formData.append('file', data, '1.png');//   // postImgData(formData).then((res) => {//   //   if (res.data.code === 200) {//   //     emit('submit', res.data.data);//   //   }//   // }).catch(err => {});//   tailorAmplificationValue.value = 0;//   tailorSpinValue.value = 0;//   tailorOption.value.img = "";//   emit('submit', '');// })// let blob = await cropper.value.getCropBlob();// // 创建 FormData 对象并添加 Blob 对象// const formData = new FormData();// formData.append('file', blob, '1.png');// let res = postImgData(formData);//// emit('submit', res.data.data);//// tailorAmplificationValue.value = 0;// tailorSpinValue.value = 0;// tailorOption.value.img = "";};
</script><style></style>

使用组件.vue

<template><div><el-upload action="#" :http-request="onImgRequest" :show-file-list="false" :before-upload="(file) => onImgUpload(file)"><div style="height: 100px; width: 100px; background-color: red;">上传</div></el-upload><el-image v-if="imagesUrl" :src="imagesUrl"></el-image><tailorImage :tailorDialogVisible="tailorDialogVisible" :tailorDialogImg="tailorDialogImg" @submit="tailorDialogImgSucc"></tailorImage><!-- <el-image :src="src" /> --></div>
</template>
<script setup>
import tailorImage from "./components/TailorImage.vue"
import {ref} from "vue"
import { ElMessage } from 'element-plus';const tailorDialogVisible = ref(false)
const tailorDialogImg = ref("")const imagesUrl = ref("")const onImgRequest = () => {};
const onImgUpload = (rawFile) => {if (rawFile.type.indexOf('image/') === -1) {ElMessage.error('文件格式错误,请上传图片类型,如: JPG，PNG后缀的文件');return false;} else {const reader = new FileReader();reader.readAsDataURL(rawFile);reader.onload = () => {tailorDialogImg.value = reader.result;tailorDialogVisible.value = true;};}
};const tailorDialogImgSucc = (data) => {// console.log("===tailorDialogImgSucc===", data)imagesUrl.value = data;tailorDialogVisible.value = false;tailorDialogImg.value = "";
}// const test = () => {
//   tailorDialogVisible.value = true
//   console.log("===裁剪图片====");
// }
</script>
<style></style>