|
- <template>
- <div style="width: 100%; height: 100%">
- <!-- 上传 -->
- <el-upload
- :http-request="myUpload"
- ref="uploader"
- class="avatar-uploader"
- accept="image/*"
- :before-upload="beforeAvatarUpload"
- >
- <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
- </el-upload>
- <!-- 弹框 -->
- <el-dialog
- get-container="#app"
- v-model="dialogVisible"
- title="Tips"
- width="60%"
- :before-close="handleClose"
- >
- <!-- <img :src="option.img" alt="" /> -->
- <!-- 123321 -->
- <div style="height: 500px; width: 500px">
- <VueCropper
- style="height: 500px; width: 500px"
- ref="cropper"
- :img="option.img"
- :outputSize="option.outputSize"
- :outputType="option.outputType"
- :info="option.info"
- :full="option.full"
- :autoCropWidth="option.autoCropWidth"
- :autoCropHeight="option.autoCropHeight"
- :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"
- :high="option.high"
- :mode="option.mode"
- />
- </div>
-
- <!-- 底部按钮 -->
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="dialogVisible = false">Cancel</el-button>
- <el-button type="primary" @click="dialogVisible = false">
- Confirm
- </el-button>
- </span>
- </template>
- </el-dialog>
- </div>
- </template>
- <script setup>
- import { VueCropper } from "vue-cropper";
- import "vue-cropper/dist/index.css";
- import { ref } from "vue";
-
- //#region 选择好文件后
- const dialogVisible = ref(true); //弹框显隐
- function beforeAvatarUpload(file) {
- let data = window.URL.createObjectURL(file);
- option.value.img = data; //给裁剪图片的路径
- dialogVisible.value = true;
- }
- // 防止组件自动上传报错
- function myUpload(params) {}
- //#endregion ------------------------
- const cropper = ref(null);
- const option = ref({
- img: "",
- outputSize: 0.5, //图片质量
- info: false, // 裁剪框的大小信息
- // outputType: 'jpeg', // 裁剪生成图片的格式
- outputType: "png", // 裁剪生成图片的格式
- canScale: true, // 图片是否允许滚轮缩放
- autoCrop: true, // 是否默认生成截图框
- autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度
- autoCropHeight: window.innerWidth - 100 + "px", // 默认生成截图框高度
- high: true, // 是否按照设备的dpr 输出等比例图片
- fixedBox: false, // 固定截图框大小 不允许改变
- fixed: false, // 是否开启截图框宽高固定比例
- // fixedNumber: [1, 1], // 截图框的宽高比例
- full: true, // 是否输出原图比例的截图
- canMoveBox: true, // 截图框能否拖动
- original: false, // 上传图片按照原始比例渲染
- centerBox: true, // 截图框是否被限制在图片里面
- infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
- mode: "100% auto", // 图片默认渲染方式
- });
- //#region 裁剪图片
-
- //#endregion ------------------------
- </script>
-
- <style lang="scss" scoped>
- .avatar-uploader .avatar {
- width: 100%;
- height: 200px;
- display: block;
- }
- .avatar-uploader .el-upload {
- border: 1px dashed var(--el-border-color);
- border-radius: 6px;
- cursor: pointer;
- position: relative;
- overflow: hidden;
- transition: var(--el-transition-duration-fast);
- }
-
- .avatar-uploader .el-upload:hover {
- border-color: var(--el-color-primary);
- }
-
- .el-icon.avatar-uploader-icon {
- font-size: 28px;
- color: #8c939d;
- width: 178px;
- height: 178px;
- text-align: center;
- }
- </style>
|