This commit is contained in:
zouzhibing
parent
8571991fe6
commit
354aa52a62
|
|
@ -1 +1 @@
|
|||
.vue-cropper[data-v-be5e5ddc]{position:relative;width:100%;height:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;direction:ltr;touch-action:none;text-align:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-box-canvas[data-v-be5e5ddc],.cropper-box[data-v-be5e5ddc],.cropper-crop-box[data-v-be5e5ddc],.cropper-drag-box[data-v-be5e5ddc],.cropper-face[data-v-be5e5ddc]{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-box-canvas img[data-v-be5e5ddc]{position:relative;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transform:none;max-width:none;max-height:none}.cropper-box[data-v-be5e5ddc]{overflow:hidden}.cropper-move[data-v-be5e5ddc]{cursor:move}.cropper-crop[data-v-be5e5ddc]{cursor:crosshair}.cropper-modal[data-v-be5e5ddc]{background:rgba(0,0,0,.5)}.cropper-view-box[data-v-be5e5ddc]{display:block;overflow:hidden;width:100%;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.7490196078431373)}.cropper-view-box[data-v-be5e5ddc],.cropper-view-box img[data-v-be5e5ddc]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-view-box img[data-v-be5e5ddc]{text-align:left;max-width:none;max-height:none}.cropper-face[data-v-be5e5ddc]{top:0;left:0;background-color:#fff;opacity:.1}.crop-info[data-v-be5e5ddc]{position:absolute;left:0;min-width:65px;text-align:center;color:#fff;line-height:20px;background-color:rgba(0,0,0,.8);font-size:12px}.crop-line[data-v-be5e5ddc]{position:absolute;display:block;width:100%;height:100%;opacity:.1}.line-w[data-v-be5e5ddc]{top:-3px;left:0;height:5px;cursor:n-resize}.line-a[data-v-be5e5ddc]{top:0;left:-3px;width:5px;cursor:w-resize}.line-s[data-v-be5e5ddc]{bottom:-3px;left:0;height:5px;cursor:s-resize}.line-d[data-v-be5e5ddc]{top:0;right:-3px;width:5px;cursor:e-resize}.crop-point[data-v-be5e5ddc]{position:absolute;width:8px;height:8px;opacity:.75;background-color:#39f;border-radius:100%}.point1[data-v-be5e5ddc]{top:-4px;left:-4px;cursor:nw-resize}.point2[data-v-be5e5ddc]{top:-5px;left:50%;margin-left:-3px;cursor:n-resize}.point3[data-v-be5e5ddc]{top:-4px;right:-4px;cursor:ne-resize}.point4[data-v-be5e5ddc]{top:50%;left:-4px;margin-top:-3px;cursor:w-resize}.point5[data-v-be5e5ddc]{top:50%;right:-4px;margin-top:-3px;cursor:e-resize}.point6[data-v-be5e5ddc]{bottom:-5px;left:-4px;cursor:sw-resize}.point7[data-v-be5e5ddc]{bottom:-5px;left:50%;margin-left:-3px;cursor:s-resize}.point8[data-v-be5e5ddc]{bottom:-5px;right:-4px;cursor:se-resize}@media screen and (max-width:500px){.crop-point[data-v-be5e5ddc]{position:absolute;width:20px;height:20px;opacity:.45;background-color:#39f;border-radius:100%}.point1[data-v-be5e5ddc]{top:-10px;left:-10px}.point2[data-v-be5e5ddc],.point4[data-v-be5e5ddc],.point5[data-v-be5e5ddc],.point7[data-v-be5e5ddc]{display:none}.point3[data-v-be5e5ddc]{top:-10px;right:-10px}.point4[data-v-be5e5ddc]{top:0;left:0}.point6[data-v-be5e5ddc]{bottom:-10px;left:-10px}.point8[data-v-be5e5ddc]{bottom:-10px;right:-10px}}.cropper-content[data-v-901cf5cc]{display:flex;width:400px;height:400px;text-align:center}[data-v-901cf5cc] .el-button{margin-top:15px}.m-cropper[data-v-901cf5cc]{width:100%;height:500px;display:flex}.m-cropper .left[data-v-901cf5cc]{width:400px;margin-right:30px}.m-cropper .preview[data-v-901cf5cc]{width:200px;height:200px;margin-top:20px;overflow:hidden}
|
||||
.vue-cropper[data-v-be5e5ddc]{position:relative;width:100%;height:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;direction:ltr;touch-action:none;text-align:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-box-canvas[data-v-be5e5ddc],.cropper-box[data-v-be5e5ddc],.cropper-crop-box[data-v-be5e5ddc],.cropper-drag-box[data-v-be5e5ddc],.cropper-face[data-v-be5e5ddc]{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-box-canvas img[data-v-be5e5ddc]{position:relative;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transform:none;max-width:none;max-height:none}.cropper-box[data-v-be5e5ddc]{overflow:hidden}.cropper-move[data-v-be5e5ddc]{cursor:move}.cropper-crop[data-v-be5e5ddc]{cursor:crosshair}.cropper-modal[data-v-be5e5ddc]{background:rgba(0,0,0,.5)}.cropper-view-box[data-v-be5e5ddc]{display:block;overflow:hidden;width:100%;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.7490196078431373)}.cropper-view-box[data-v-be5e5ddc],.cropper-view-box img[data-v-be5e5ddc]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-view-box img[data-v-be5e5ddc]{text-align:left;max-width:none;max-height:none}.cropper-face[data-v-be5e5ddc]{top:0;left:0;background-color:#fff;opacity:.1}.crop-info[data-v-be5e5ddc]{position:absolute;left:0;min-width:65px;text-align:center;color:#fff;line-height:20px;background-color:rgba(0,0,0,.8);font-size:12px}.crop-line[data-v-be5e5ddc]{position:absolute;display:block;width:100%;height:100%;opacity:.1}.line-w[data-v-be5e5ddc]{top:-3px;left:0;height:5px;cursor:n-resize}.line-a[data-v-be5e5ddc]{top:0;left:-3px;width:5px;cursor:w-resize}.line-s[data-v-be5e5ddc]{bottom:-3px;left:0;height:5px;cursor:s-resize}.line-d[data-v-be5e5ddc]{top:0;right:-3px;width:5px;cursor:e-resize}.crop-point[data-v-be5e5ddc]{position:absolute;width:8px;height:8px;opacity:.75;background-color:#39f;border-radius:100%}.point1[data-v-be5e5ddc]{top:-4px;left:-4px;cursor:nw-resize}.point2[data-v-be5e5ddc]{top:-5px;left:50%;margin-left:-3px;cursor:n-resize}.point3[data-v-be5e5ddc]{top:-4px;right:-4px;cursor:ne-resize}.point4[data-v-be5e5ddc]{top:50%;left:-4px;margin-top:-3px;cursor:w-resize}.point5[data-v-be5e5ddc]{top:50%;right:-4px;margin-top:-3px;cursor:e-resize}.point6[data-v-be5e5ddc]{bottom:-5px;left:-4px;cursor:sw-resize}.point7[data-v-be5e5ddc]{bottom:-5px;left:50%;margin-left:-3px;cursor:s-resize}.point8[data-v-be5e5ddc]{bottom:-5px;right:-4px;cursor:se-resize}@media screen and (max-width:500px){.crop-point[data-v-be5e5ddc]{position:absolute;width:20px;height:20px;opacity:.45;background-color:#39f;border-radius:100%}.point1[data-v-be5e5ddc]{top:-10px;left:-10px}.point2[data-v-be5e5ddc],.point4[data-v-be5e5ddc],.point5[data-v-be5e5ddc],.point7[data-v-be5e5ddc]{display:none}.point3[data-v-be5e5ddc]{top:-10px;right:-10px}.point4[data-v-be5e5ddc]{top:0;left:0}.point6[data-v-be5e5ddc]{bottom:-10px;left:-10px}.point8[data-v-be5e5ddc]{bottom:-10px;right:-10px}}.cropper-content[data-v-2ff088fd]{display:flex;width:400px;height:400px;text-align:center}[data-v-2ff088fd] .el-button{margin-top:15px}.m-cropper[data-v-2ff088fd]{width:100%;height:500px;display:flex}.m-cropper .left[data-v-2ff088fd]{width:400px;margin-right:30px}.m-cropper .preview[data-v-2ff088fd]{width:200px;height:200px;margin-top:20px;overflow:hidden}
|
||||
|
|
@ -1 +1 @@
|
|||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>admin3</title><link href="css/chunk-170e4747.203a047d.css" rel="prefetch"><link href="css/chunk-2234305e.5a53243e.css" rel="prefetch"><link href="css/chunk-3203f382.203a047d.css" rel="prefetch"><link href="css/chunk-378ee166.ca18b920.css" rel="prefetch"><link href="css/chunk-3850c398.d676d2b0.css" rel="prefetch"><link href="css/chunk-45459eaa.b8a19145.css" rel="prefetch"><link href="css/chunk-62dbcb30.2d86bcb5.css" rel="prefetch"><link href="css/chunk-6baa09d4.ad6a37a0.css" rel="prefetch"><link href="js/chunk-0375f012.576712c3.js" rel="prefetch"><link href="js/chunk-170e4747.a630141d.js" rel="prefetch"><link href="js/chunk-2234305e.8f32d19b.js" rel="prefetch"><link href="js/chunk-2d217928.030f74ec.js" rel="prefetch"><link href="js/chunk-3203f382.288b52e4.js" rel="prefetch"><link href="js/chunk-378ee166.5f385493.js" rel="prefetch"><link href="js/chunk-3850c398.0f3fb018.js" rel="prefetch"><link href="js/chunk-45459eaa.7db09f7b.js" rel="prefetch"><link href="js/chunk-496def4a.163ff0dc.js" rel="prefetch"><link href="js/chunk-62dbcb30.cc4ffa78.js" rel="prefetch"><link href="js/chunk-6baa09d4.4cafb58b.js" rel="prefetch"><link href="js/chunk-6f60c8f1.dd4246c1.js" rel="prefetch"><link href="css/app.2cec3391.css" rel="preload" as="style"><link href="css/chunk-vendors.9660a410.css" rel="preload" as="style"><link href="js/app.6c35b76e.js" rel="preload" as="script"><link href="js/chunk-vendors.0b85d876.js" rel="preload" as="script"><link href="css/chunk-vendors.9660a410.css" rel="stylesheet"><link href="css/app.2cec3391.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but admin3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.0b85d876.js"></script><script src="js/app.6c35b76e.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>admin3</title><link href="css/chunk-000055b2.8b7fdf83.css" rel="prefetch"><link href="css/chunk-170e4747.203a047d.css" rel="prefetch"><link href="css/chunk-3203f382.203a047d.css" rel="prefetch"><link href="css/chunk-378ee166.ca18b920.css" rel="prefetch"><link href="css/chunk-3850c398.d676d2b0.css" rel="prefetch"><link href="css/chunk-45459eaa.b8a19145.css" rel="prefetch"><link href="css/chunk-62dbcb30.2d86bcb5.css" rel="prefetch"><link href="css/chunk-6baa09d4.ad6a37a0.css" rel="prefetch"><link href="js/chunk-000055b2.8b8a6d20.js" rel="prefetch"><link href="js/chunk-0375f012.576712c3.js" rel="prefetch"><link href="js/chunk-170e4747.a630141d.js" rel="prefetch"><link href="js/chunk-2d217928.030f74ec.js" rel="prefetch"><link href="js/chunk-3203f382.288b52e4.js" rel="prefetch"><link href="js/chunk-378ee166.5f385493.js" rel="prefetch"><link href="js/chunk-3850c398.0f3fb018.js" rel="prefetch"><link href="js/chunk-45459eaa.7db09f7b.js" rel="prefetch"><link href="js/chunk-496def4a.163ff0dc.js" rel="prefetch"><link href="js/chunk-62dbcb30.cc4ffa78.js" rel="prefetch"><link href="js/chunk-6baa09d4.4cafb58b.js" rel="prefetch"><link href="js/chunk-6f60c8f1.dd4246c1.js" rel="prefetch"><link href="css/app.2cec3391.css" rel="preload" as="style"><link href="css/chunk-vendors.9660a410.css" rel="preload" as="style"><link href="js/app.c41183c0.js" rel="preload" as="script"><link href="js/chunk-vendors.0b85d876.js" rel="preload" as="script"><link href="css/chunk-vendors.9660a410.css" rel="stylesheet"><link href="css/app.2cec3391.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but admin3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.0b85d876.js"></script><script src="js/app.c41183c0.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -164,7 +164,8 @@
|
|||
<script>
|
||||
import VueCropper from 'vue-cropperjs';
|
||||
import 'cropperjs/dist/cropper.css';
|
||||
import imgSrc from "@/assets/image/berserk.jpg"
|
||||
// import imgSrc from "@/assets/image/berserk.jpg"
|
||||
import imgSrc from '@/assets/image/im1.jpeg'
|
||||
export default {
|
||||
components: {
|
||||
VueCropper,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="cropper-content">
|
||||
<vue-cropper
|
||||
ref="cropper"
|
||||
:img="option.img"
|
||||
:img="imgSrc"
|
||||
:output-size="option.size"
|
||||
:output-type="option.outputType"
|
||||
:info="true" :full="option.full"
|
||||
|
|
@ -58,13 +58,15 @@
|
|||
// https://codepen.io/xyxiao001/pen/yLooYKg
|
||||
import 'vue-cropper/dist/index.css'
|
||||
import { VueCropper } from "vue-cropper";
|
||||
import imgSrc from '@/assets/image/cro.jpg'
|
||||
import cro from '@/assets/image/cro.jpg'
|
||||
// let imgSrc = require('@/assets/image/cro.jpg')
|
||||
import {reactive, ref} from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { UploadProps, UploadUserFile } from 'element-plus'
|
||||
const cropper = ref()
|
||||
const imgSrc = ref(cro)
|
||||
const option = reactive({
|
||||
img: imgSrc,
|
||||
img: cro,
|
||||
size: 1,
|
||||
full: false, // 是否输出原图比例的截图
|
||||
outputType: 'png',
|
||||
|
|
@ -142,7 +144,7 @@
|
|||
}
|
||||
|
||||
const reset = ()=> {
|
||||
option.img = ''
|
||||
imgSrc.value = ''
|
||||
option.cropImg=''
|
||||
}
|
||||
|
||||
|
|
@ -164,7 +166,7 @@
|
|||
}
|
||||
resolve(e.target.result)
|
||||
option.imgSrc = data
|
||||
option.img = data
|
||||
imgSrc.value = data
|
||||
}
|
||||
}else{
|
||||
ElMessage.error('请上传图片')
|
||||
|
|
|
|||
Loading…
Reference in New Issue