| @@ -1,377 +0,0 @@ | |||||
| <template> | |||||
| <div class="uploder"> | |||||
| <div class="change-photo-setter" style="height: 240px; width: 160px"> | |||||
| <van-uploader ref="uploader" class="sett-item" :before-read="beforeRead" style="height: 240px; width: 160px"> | |||||
| <div style="height: 240px; width: 160px"> | |||||
| <!-- <img :src="ImgUrl" alt="" /> --> | |||||
| </div> | |||||
| </van-uploader> | |||||
| </div> | |||||
| <div class="uploadava"> | |||||
| <!-- van-popup有bug,某些1情况需要绑定app为根 --> | |||||
| <van-popup :get-container="this.isAndroid ? '' : '#app'" class="vanPopup" duration="0" v-model="showCropper" position="top" :style="{ height: '100%' }"> | |||||
| <div class="cropper-container" :style="{ height: '92vh', position: 'relative' }"> | |||||
| <van-loading v-show="loadingShow" size="50" color="#fff" vertical text-color="#fff">上传中...</van-loading> | |||||
| <!-- 切图组件 --> | |||||
| <!-- :outputSize="option.outputSize" --> | |||||
| <vueCropper | |||||
| :style="{ backgroundImage: 'none', height: '92vh' }" | |||||
| 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 style="display: flex; justify-content: space-between; padding: 10px; height: 8vh"> | |||||
| <div @click="onClickLeft">取消</div> | |||||
| <div @click="onClickRight">确定</div> | |||||
| </div> --> | |||||
| <van-nav-bar :style="{ height: '8vh', width: '100%', position: 'absolute' }" left-text="取消" right-text="确定" @click-left="onClickLeft" @click-right="onClickRight" /> | |||||
| </div> | |||||
| </van-popup> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { awsImgUpload } from '@/api/editModel'; | |||||
| import { Toast } from 'vant'; | |||||
| import { VueCropper } from 'vue-cropper'; | |||||
| import { scrollToID, getDeviceType } from '../utils'; | |||||
| import { saveImgApi } from '../api/editModel'; | |||||
| import { watch } from 'vue'; | |||||
| export default { | |||||
| name: 'uploadAva', | |||||
| components: { | |||||
| VueCropper | |||||
| }, | |||||
| props: { | |||||
| showAta: { | |||||
| default: false, | |||||
| type: Boolean | |||||
| }, | |||||
| avaUrl: { | |||||
| default: '', | |||||
| type: String | |||||
| }, | |||||
| type: { | |||||
| default: '', | |||||
| type: Number | |||||
| }, | |||||
| videoType: { | |||||
| default: null, | |||||
| type: Number | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| isAndroid: false, //判断是不是ios | |||||
| aaa: null, | |||||
| ImgUrl: '', | |||||
| show: true, // 上传类型的弹窗 | |||||
| imageFileName: '', | |||||
| showCropper: false, // 裁剪的弹窗 | |||||
| option: { | |||||
| 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' // 图片默认渲染方式 | |||||
| }, | |||||
| loadingShow: false // 是否展示loading | |||||
| }; | |||||
| }, | |||||
| created() { | |||||
| const deviceType = getDeviceType(); | |||||
| this.isAndroid = false; | |||||
| if (!deviceType) { | |||||
| // 设备类型为pc | |||||
| this.isAndroid = false; | |||||
| } else { | |||||
| if (deviceType[0] == 'Android') { | |||||
| // 设备类型为安卓 | |||||
| this.isAndroid = true; | |||||
| } else { | |||||
| // 其他设备 | |||||
| this.isAndroid = false; | |||||
| } | |||||
| } | |||||
| if (this.type == 4 && this.videoType == 1) { | |||||
| this.option.autoCropWidth = 1080 + 'px'; // 默认生成截图框宽度 | |||||
| this.option.autoCropHeight = 1920 + 'px'; // 默认生成截图框高度 | |||||
| this.option.fixed = true; | |||||
| this.option.fixedNumber = [1080, 1920]; | |||||
| } | |||||
| if (this.type == 4 && this.videoType == 2) { | |||||
| this.option.autoCropWidth = 1920 + 'px'; // 默认生成截图框宽度 | |||||
| this.option.autoCropHeight = 1080 + 'px'; // 默认生成截图框高度 | |||||
| this.option.fixed = true; | |||||
| this.option.fixedNumber = [1920, 1080]; | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| beforeRead(file) { | |||||
| // console.log(file) | |||||
| if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | |||||
| this.$toast('请上传 jpg/png 格式图片'); | |||||
| return false; | |||||
| } | |||||
| // let data = window.URL.createObjectURL(new Blob([file])); | |||||
| let data = window.URL.createObjectURL(file); | |||||
| console.log(data); | |||||
| this.option.img = data; //给裁剪图片的路径 | |||||
| this.showCropper = true; | |||||
| return false; | |||||
| }, | |||||
| // 点击裁剪的选择 | |||||
| onClickRight() { | |||||
| const timestamp = Date.now(); | |||||
| let that = this; | |||||
| this.loadingShow = true; | |||||
| // console.log(this.$refs.cropper); | |||||
| this.$refs.cropper.getCropData(data => { | |||||
| // do something | |||||
| // console.log(data, 'base64'); | |||||
| }); | |||||
| this.$refs.cropper.getCropBlob(async data => { | |||||
| console.log(data, '上传图片数据'); | |||||
| // 利用canvas压缩图片 | |||||
| const img = new Image(); | |||||
| img.src = URL.createObjectURL(data); | |||||
| const canvas = document.createElement('canvas'); | |||||
| const context = canvas.getContext('2d'); | |||||
| const getCanvasData = new Promise((resolve, reject) => { | |||||
| canvas.width = img.width; | |||||
| canvas.height = img.height; | |||||
| img.onload = function () { | |||||
| context.drawImage(img, 0, 0); | |||||
| canvas.toBlob( | |||||
| function (compressedBlob) { | |||||
| resolve(compressedBlob); | |||||
| }, | |||||
| 'png', | |||||
| 0.5 | |||||
| ); // 指定导出的图像类型和压缩质量 | |||||
| }; | |||||
| }); | |||||
| const canvasData = await getCanvasData; | |||||
| // --------------------------------------------- | |||||
| let formData = new FormData(); | |||||
| // formData.append('file', data, timestamp + '.png'); | |||||
| console.log(canvasData, '压缩图片数据'); | |||||
| formData.append('file', canvasData, timestamp + '.png'); | |||||
| that.loading = false; | |||||
| // console.log(that.ImgUrl, 'dasdasd') | |||||
| // 发请求 | |||||
| const AccessToken = localStorage.getItem('AccessToken'); | |||||
| that | |||||
| .$axios({ | |||||
| method: 'post', | |||||
| url: process.env.VUE_APP_API_ROOT + `/api/upload/awsImgUpload`, | |||||
| headers: { | |||||
| 'content-type': 'multipart/form-data', | |||||
| token: AccessToken, | |||||
| 'Access-Control-Allow-Credentials': true | |||||
| }, | |||||
| data: formData | |||||
| }) | |||||
| .then(async res => { | |||||
| // console.log(res.data.data.url) | |||||
| const res1 = await saveImgApi({ | |||||
| type: that.type, | |||||
| videoType: that.videoType, | |||||
| material: res.data.data.url | |||||
| }); | |||||
| // 重新获取列表 | |||||
| await that.$parent.$parent.getMyBGIListApi(); | |||||
| await that.$parent.$parent.getMyScListApi(); | |||||
| if (this.type == 4) { | |||||
| that.$parent.$parent.changeShowBGIList(1); | |||||
| } | |||||
| if (this.type == 5) { | |||||
| that.$parent.$parent.changeShowBGIList(3); | |||||
| } | |||||
| that.loadingShow = false; | |||||
| that.showCropper = false; | |||||
| Toast.success('上传成功'); | |||||
| }); | |||||
| }); | |||||
| }, | |||||
| // 点击取消 | |||||
| onClickLeft() { | |||||
| this.loadingShow = false; | |||||
| this.showCropper = false; | |||||
| this.$parent.showPhotoUploader = false; | |||||
| }, | |||||
| // 上传图片 | |||||
| async pushImg(data) { | |||||
| try { | |||||
| const res = await awsImgUpload(data); | |||||
| this.loadingShow = false; | |||||
| this.showCropper = false; | |||||
| Toast.success('上传成功'); | |||||
| } catch (error) { | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| //图片转base64,异步 | |||||
| toBase64(file) { | |||||
| let that = this; | |||||
| return new Promise((resolve, reject) => { | |||||
| const reader = new FileReader(); | |||||
| reader.onload = () => { | |||||
| // base64结果 | |||||
| that.ImgUrl = this.result; | |||||
| that.loading = false; | |||||
| }; | |||||
| reader.onerror = reject; | |||||
| reader.readAsDataURL(file); | |||||
| }); | |||||
| }, | |||||
| // base64 转二进制 | |||||
| base64ToBinary(base64) { | |||||
| const binaryStr = window.atob(base64); | |||||
| const len = binaryStr.length; | |||||
| const bytes = new Uint8Array(len); | |||||
| for (let i = 0; i < len; ++i) { | |||||
| bytes[i] = binaryStr.charCodeAt(i); | |||||
| } | |||||
| return bytes; | |||||
| } | |||||
| }, | |||||
| mounted() {} | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| // /deep/.cropper-container { | |||||
| // z-index: 2005 !important; | |||||
| // } | |||||
| // .uploder{ | |||||
| // overflow: hidden; | |||||
| // } | |||||
| /deep/.van-nav-bar__content { | |||||
| height: 8vh; | |||||
| background-color: #ccc; | |||||
| } | |||||
| /deep/.van-hairline--bottom::after { | |||||
| // height: 8vh; | |||||
| } | |||||
| /deep/.cropper-view-box { | |||||
| outline: 2px dashed #fff !important; | |||||
| } | |||||
| /deep/.crop-point { | |||||
| background-color: auto !important; | |||||
| } | |||||
| /deep/.van-loading { | |||||
| position: absolute; | |||||
| // color: red; | |||||
| z-index: 9999; | |||||
| left: 50%; | |||||
| top: 50%; | |||||
| margin-left: -55px; | |||||
| margin-top: -30px; | |||||
| background: rgba(0, 0, 0, 0.3); | |||||
| padding: 10px 30px; | |||||
| border-radius: 25px; | |||||
| } | |||||
| .uploadava { | |||||
| // width: 100%; | |||||
| // width: 100vw; | |||||
| height: 94vh; | |||||
| .update-avatar { | |||||
| height: 100%; | |||||
| text-align: center; | |||||
| .update-avatar-line { | |||||
| width: 100%; | |||||
| height: 1px; | |||||
| background-color: #979797; | |||||
| } | |||||
| .avatar-select-type { | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding-bottom: 4px; | |||||
| .upload-avator { | |||||
| padding: 14px; | |||||
| } | |||||
| } | |||||
| p { | |||||
| margin: 15px 0 30px; | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding: 15px 0 18px; | |||||
| } | |||||
| } | |||||
| .cropper-container { | |||||
| position: relative; | |||||
| width: 100%; | |||||
| height: 94vh; | |||||
| // height: 100%; | |||||
| /deep/ .van-nav-bar { | |||||
| position: absolute; | |||||
| z-index: 999; | |||||
| width: 100%; | |||||
| bottom: 0px; | |||||
| left: 0px; | |||||
| height: 6vh; | |||||
| background-color: rgba(0, 0, 0, 0.87); | |||||
| :global(.van-nav-bar__text) { | |||||
| color: #000; | |||||
| // font-size: $font-size-normal-x; | |||||
| } | |||||
| :global(.van-nav-bar__text:nth-child(2)) { | |||||
| color: #000; | |||||
| font-weight: 500; | |||||
| } | |||||
| // :global(.van-icon) { | |||||
| // color: red; | |||||
| // } | |||||
| } | |||||
| } | |||||
| .vue-cropper { | |||||
| background: #000; | |||||
| width: 100%; | |||||
| height: 88vh; | |||||
| padding-top: 46px; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -1,364 +0,0 @@ | |||||
| <template> | |||||
| <div class="uploder"> | |||||
| <div class="change-photo-setter" style="height: 240px; width: 160px"> | |||||
| <van-uploader ref="uploader" class="sett-item" :before-read="beforeRead" style="height: 240px; width: 160px"> | |||||
| <div style="height: 240px; width: 160px"> | |||||
| <!-- <img :src="ImgUrl" alt="" /> --> | |||||
| </div> | |||||
| </van-uploader> | |||||
| </div> | |||||
| <div class="uploadava"> | |||||
| <!-- van-popup有bug,某些1情况需要绑定app为根 --> | |||||
| <van-popup :get-container="this.isAndroid ? '' : '#app'" class="vanPopup" duration="0" v-model="showCropper" position="top" :style="{ height: '100%' }"> | |||||
| <div class="cropper-container" :style="{ height: '92vh', position: 'relative' }"> | |||||
| <van-loading v-show="loadingShow" size="50" color="#fff" vertical text-color="#fff">上传中...</van-loading> | |||||
| <!-- 切图组件 --> | |||||
| <!-- :outputSize="option.outputSize" --> | |||||
| <vueCropper | |||||
| :style="{ backgroundImage: 'none', height: '92vh' }" | |||||
| 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 style="display: flex; justify-content: space-between; padding: 10px; height: 8vh"> | |||||
| <div @click="onClickLeft">取消</div> | |||||
| <div @click="onClickRight">确定</div> | |||||
| </div> --> | |||||
| <van-nav-bar :style="{ height: '8vh', width: '100%', position: 'absolute' }" left-text="取消" right-text="确定" @click-left="onClickLeft" @click-right="onClickRight" /> | |||||
| </div> | |||||
| </van-popup> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { awsImgUpload } from '@/api/editModel'; | |||||
| import { Toast } from 'vant'; | |||||
| import { VueCropper } from 'vue-cropper'; | |||||
| import { scrollToID, getDeviceType } from '../utils'; | |||||
| import { saveImgApi } from '../api/editModel'; | |||||
| import { watch } from 'vue'; | |||||
| export default { | |||||
| name: 'uploadAva', | |||||
| components: { | |||||
| VueCropper | |||||
| }, | |||||
| props: { | |||||
| showAta: { | |||||
| default: false, | |||||
| type: Boolean | |||||
| }, | |||||
| avaUrl: { | |||||
| default: '', | |||||
| type: String | |||||
| }, | |||||
| type: { | |||||
| default: '', | |||||
| type: Number | |||||
| }, | |||||
| videoType: { | |||||
| default: null, | |||||
| type: Number | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| isAndroid: false, //判断是不是ios | |||||
| aaa: null, | |||||
| ImgUrl: '', | |||||
| show: true, // 上传类型的弹窗 | |||||
| imageFileName: '', | |||||
| showCropper: false, // 裁剪的弹窗 | |||||
| option: { | |||||
| 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' // 图片默认渲染方式 | |||||
| }, | |||||
| loadingShow: false // 是否展示loading | |||||
| }; | |||||
| }, | |||||
| created() { | |||||
| const deviceType = getDeviceType(); | |||||
| this.isAndroid = false; | |||||
| if (!deviceType) { | |||||
| // 设备类型为pc | |||||
| this.isAndroid = false; | |||||
| } else { | |||||
| if (deviceType[0] == 'Android') { | |||||
| // 设备类型为安卓 | |||||
| this.isAndroid = true; | |||||
| } else { | |||||
| // 其他设备 | |||||
| this.isAndroid = false; | |||||
| } | |||||
| } | |||||
| if (this.type == 4 && this.videoType == 1) { | |||||
| this.option.autoCropWidth = 1080 + 'px'; // 默认生成截图框宽度 | |||||
| this.option.autoCropHeight = 1920 + 'px'; // 默认生成截图框高度 | |||||
| this.option.fixed = true; | |||||
| this.option.fixedNumber = [1080, 1920]; | |||||
| } | |||||
| if (this.type == 4 && this.videoType == 2) { | |||||
| this.option.autoCropWidth = 1920 + 'px'; // 默认生成截图框宽度 | |||||
| this.option.autoCropHeight = 1080 + 'px'; // 默认生成截图框高度 | |||||
| this.option.fixed = true; | |||||
| this.option.fixedNumber = [1920, 1080]; | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| beforeRead(file) { | |||||
| // console.log(file) | |||||
| if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | |||||
| this.$toast('请上传 jpg/png 格式图片'); | |||||
| return false; | |||||
| } | |||||
| // let data = window.URL.createObjectURL(new Blob([file])); | |||||
| let data = window.URL.createObjectURL(file); | |||||
| console.log(data); | |||||
| this.option.img = data; //给裁剪图片的路径 | |||||
| this.showCropper = true; | |||||
| return false; | |||||
| }, | |||||
| // 点击裁剪的选择 | |||||
| onClickRight() { | |||||
| const timestamp = Date.now(); | |||||
| let that = this; | |||||
| this.loadingShow = true; | |||||
| // console.log(this.$refs.cropper); | |||||
| this.$refs.cropper.getCropData(data => { | |||||
| // do something | |||||
| // console.log(data, 'base64'); | |||||
| }); | |||||
| this.$refs.cropper.getCropBlob(async data => { | |||||
| console.log(data, '上传图片数据'); | |||||
| let formData = new FormData(); | |||||
| formData.append('file', data, timestamp + '.png'); | |||||
| let file = formData.get('file'); | |||||
| // 转为 base64 | |||||
| // let reader = new FileReader(); | |||||
| // const base64Data = await new Promise((resolve, reject) => { | |||||
| // reader.onload = () => { | |||||
| // resolve(reader.result); | |||||
| // }; | |||||
| // reader.readAsDataURL(file); | |||||
| // }); | |||||
| // let imgBinary = await that.base64ToBinary(base64Data.substring(23)); | |||||
| // // base64结果 | |||||
| // that.ImgUrl = base64Data; | |||||
| that.loading = false; | |||||
| // console.log(that.ImgUrl, 'dasdasd') | |||||
| // 发请求 | |||||
| const AccessToken = localStorage.getItem('AccessToken'); | |||||
| that | |||||
| .$axios({ | |||||
| method: 'post', | |||||
| // url: `https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload`, | |||||
| // url: `http://m.metavatar.cc/C/api/upload/awsImgUpload`, | |||||
| url: process.env.VUE_APP_API_ROOT + `/api/upload/awsImgUpload`, | |||||
| headers: { | |||||
| 'content-type': 'multipart/form-data', | |||||
| token: AccessToken, | |||||
| 'Access-Control-Allow-Credentials': true | |||||
| }, | |||||
| data: formData | |||||
| }) | |||||
| .then(async res => { | |||||
| // console.log(res.data.data.url) | |||||
| const res1 = await saveImgApi({ | |||||
| type: that.type, | |||||
| videoType: that.videoType, | |||||
| material: res.data.data.url | |||||
| }); | |||||
| // 重新获取列表 | |||||
| await that.$parent.$parent.getMyBGIListApi(); | |||||
| await that.$parent.$parent.getMyScListApi(); | |||||
| if (this.type == 4) { | |||||
| that.$parent.$parent.changeShowBGIList(1); | |||||
| } | |||||
| if (this.type == 5) { | |||||
| that.$parent.$parent.changeShowBGIList(3); | |||||
| } | |||||
| that.loadingShow = false; | |||||
| that.showCropper = false; | |||||
| Toast.success('上传成功'); | |||||
| }); | |||||
| }); | |||||
| }, | |||||
| // 点击取消 | |||||
| onClickLeft() { | |||||
| this.loadingShow = false; | |||||
| this.showCropper = false; | |||||
| this.$parent.showPhotoUploader = false; | |||||
| }, | |||||
| // 上传图片 | |||||
| async pushImg(data) { | |||||
| try { | |||||
| const res = await awsImgUpload(data); | |||||
| this.loadingShow = false; | |||||
| this.showCropper = false; | |||||
| Toast.success('上传成功'); | |||||
| } catch (error) { | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| //图片转base64,异步 | |||||
| toBase64(file) { | |||||
| let that = this; | |||||
| return new Promise((resolve, reject) => { | |||||
| const reader = new FileReader(); | |||||
| reader.onload = () => { | |||||
| // base64结果 | |||||
| that.ImgUrl = this.result; | |||||
| that.loading = false; | |||||
| }; | |||||
| reader.onerror = reject; | |||||
| reader.readAsDataURL(file); | |||||
| }); | |||||
| }, | |||||
| // base64 转二进制 | |||||
| base64ToBinary(base64) { | |||||
| const binaryStr = window.atob(base64); | |||||
| const len = binaryStr.length; | |||||
| const bytes = new Uint8Array(len); | |||||
| for (let i = 0; i < len; ++i) { | |||||
| bytes[i] = binaryStr.charCodeAt(i); | |||||
| } | |||||
| return bytes; | |||||
| } | |||||
| }, | |||||
| mounted() {} | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| // /deep/.cropper-container { | |||||
| // z-index: 2005 !important; | |||||
| // } | |||||
| // .uploder{ | |||||
| // overflow: hidden; | |||||
| // } | |||||
| /deep/.van-nav-bar__content { | |||||
| height: 8vh; | |||||
| background-color: #ccc; | |||||
| } | |||||
| /deep/.van-hairline--bottom::after { | |||||
| // height: 8vh; | |||||
| } | |||||
| /deep/.cropper-view-box { | |||||
| outline: 2px dashed #fff !important; | |||||
| } | |||||
| /deep/.crop-point { | |||||
| background-color: auto !important; | |||||
| } | |||||
| /deep/.van-loading { | |||||
| position: absolute; | |||||
| // color: red; | |||||
| z-index: 9999; | |||||
| left: 50%; | |||||
| top: 50%; | |||||
| margin-left: -55px; | |||||
| margin-top: -30px; | |||||
| background: rgba(0, 0, 0, 0.3); | |||||
| padding: 10px 30px; | |||||
| border-radius: 25px; | |||||
| } | |||||
| .uploadava { | |||||
| // width: 100%; | |||||
| // width: 100vw; | |||||
| height: 94vh; | |||||
| .update-avatar { | |||||
| height: 100%; | |||||
| text-align: center; | |||||
| .update-avatar-line { | |||||
| width: 100%; | |||||
| height: 1px; | |||||
| background-color: #979797; | |||||
| } | |||||
| .avatar-select-type { | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding-bottom: 4px; | |||||
| .upload-avator { | |||||
| padding: 14px; | |||||
| } | |||||
| } | |||||
| p { | |||||
| margin: 15px 0 30px; | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding: 15px 0 18px; | |||||
| } | |||||
| } | |||||
| .cropper-container { | |||||
| position: relative; | |||||
| width: 100%; | |||||
| height: 94vh; | |||||
| // height: 100%; | |||||
| /deep/ .van-nav-bar { | |||||
| position: absolute; | |||||
| z-index: 999; | |||||
| width: 100%; | |||||
| bottom: 0px; | |||||
| left: 0px; | |||||
| height: 6vh; | |||||
| background-color: rgba(0, 0, 0, 0.87); | |||||
| :global(.van-nav-bar__text) { | |||||
| color: #000; | |||||
| // font-size: $font-size-normal-x; | |||||
| } | |||||
| :global(.van-nav-bar__text:nth-child(2)) { | |||||
| color: #000; | |||||
| font-weight: 500; | |||||
| } | |||||
| // :global(.van-icon) { | |||||
| // color: red; | |||||
| // } | |||||
| } | |||||
| } | |||||
| .vue-cropper { | |||||
| background: #000; | |||||
| width: 100%; | |||||
| height: 88vh; | |||||
| padding-top: 46px; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -1,376 +1,419 @@ | |||||
| <template> | |||||
| <div class="uploder"> | |||||
| <div class="change-photo-setter" style="height: 240px; width: 160px"> | |||||
| <van-uploader ref="uploader" class="sett-item" :before-read="beforeRead" style="height: 240px; width: 160px"> | |||||
| <div style="height: 240px; width: 160px"> | |||||
| <!-- <img :src="ImgUrl" alt="" /> --> | |||||
| </div> | |||||
| </van-uploader> | |||||
| </div> | |||||
| <div class="uploadava"> | |||||
| <!-- van-popup有bug,某些1情况需要绑定app为根 --> | |||||
| <van-popup :get-container="this.isAndroid ? '' : '#app'" class="vanPopup" duration="0" v-model="showCropper" position="top" :style="{ height: '100%' }"> | |||||
| <div class="cropper-container" :style="{ height: '92vh', position: 'relative' }"> | |||||
| <van-loading v-show="loadingShow" size="50" color="#fff" vertical text-color="#fff">上传中...</van-loading> | |||||
| <!-- 切图组件 --> | |||||
| <!-- :outputSize="option.outputSize" --> | |||||
| <vueCropper | |||||
| :style="{ backgroundImage: 'none', height: '92vh' }" | |||||
| 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 style="display: flex; justify-content: space-between; padding: 10px; height: 8vh"> | |||||
| <div @click="onClickLeft">取消</div> | |||||
| <div @click="onClickRight">确定</div> | |||||
| </div> --> | |||||
| <van-nav-bar :style="{ height: '8vh', width: '100%', position: 'absolute' }" left-text="取消" right-text="确定" @click-left="onClickLeft" @click-right="onClickRight" /> | |||||
| </div> | |||||
| </van-popup> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { awsImgUpload } from '@/api/editModel'; | |||||
| import { Toast } from 'vant'; | |||||
| import { VueCropper } from 'vue-cropper'; | |||||
| import { scrollToID, getDeviceType } from '../utils'; | |||||
| import { saveImgApi } from '../api/editModel'; | |||||
| import { watch } from 'vue'; | |||||
| export default { | |||||
| name: 'uploadAva', | |||||
| components: { | |||||
| VueCropper | |||||
| }, | |||||
| props: { | |||||
| showAta: { | |||||
| default: false, | |||||
| type: Boolean | |||||
| }, | |||||
| avaUrl: { | |||||
| default: '', | |||||
| type: String | |||||
| }, | |||||
| type: { | |||||
| default: '', | |||||
| type: Number | |||||
| }, | |||||
| videoType: { | |||||
| default: null, | |||||
| type: Number | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| isAndroid: false, //判断是不是ios | |||||
| aaa: null, | |||||
| ImgUrl: '', | |||||
| show: true, // 上传类型的弹窗 | |||||
| imageFileName: '', | |||||
| showCropper: false, // 裁剪的弹窗 | |||||
| option: { | |||||
| 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' // 图片默认渲染方式 | |||||
| }, | |||||
| loadingShow: false // 是否展示loading | |||||
| }; | |||||
| }, | |||||
| created() { | |||||
| const deviceType = getDeviceType(); | |||||
| this.isAndroid = false; | |||||
| if (!deviceType) { | |||||
| // 设备类型为pc | |||||
| this.isAndroid = false; | |||||
| } else { | |||||
| if (deviceType[0] == 'Android') { | |||||
| // 设备类型为安卓 | |||||
| this.isAndroid = true; | |||||
| } else { | |||||
| // 其他设备 | |||||
| this.isAndroid = false; | |||||
| } | |||||
| } | |||||
| if (this.type == 4 && this.videoType == 1) { | |||||
| this.option.autoCropWidth = 1080 + 'px'; // 默认生成截图框宽度 | |||||
| this.option.autoCropHeight = 1920 + 'px'; // 默认生成截图框高度 | |||||
| this.option.fixed = true; | |||||
| this.option.fixedNumber = [1080, 1920]; | |||||
| } | |||||
| if (this.type == 4 && this.videoType == 2) { | |||||
| this.option.autoCropWidth = 1920 + 'px'; // 默认生成截图框宽度 | |||||
| this.option.autoCropHeight = 1080 + 'px'; // 默认生成截图框高度 | |||||
| this.option.fixed = true; | |||||
| this.option.fixedNumber = [1920, 1080]; | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| beforeRead(file) { | |||||
| // console.log(file) | |||||
| if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | |||||
| this.$toast('请上传 jpg/png 格式图片'); | |||||
| return false; | |||||
| } | |||||
| // let data = window.URL.createObjectURL(new Blob([file])); | |||||
| let data = window.URL.createObjectURL(file); | |||||
| console.log(data); | |||||
| this.option.img = data; //给裁剪图片的路径 | |||||
| this.showCropper = true; | |||||
| return false; | |||||
| }, | |||||
| // 点击裁剪的选择 | |||||
| onClickRight() { | |||||
| const timestamp = Date.now(); | |||||
| let that = this; | |||||
| this.loadingShow = true; | |||||
| // console.log(this.$refs.cropper); | |||||
| this.$refs.cropper.getCropData(data => { | |||||
| // do something | |||||
| // console.log(data, 'base64'); | |||||
| }); | |||||
| this.$refs.cropper.getCropBlob(async data => { | |||||
| console.log(data, '上传图片数据'); | |||||
| // 利用canvas压缩图片 | |||||
| const img = new Image(); | |||||
| img.src = URL.createObjectURL(data); | |||||
| const canvas = document.createElement('canvas'); | |||||
| const context = canvas.getContext('2d'); | |||||
| const getCanvasData = new Promise((resolve, reject) => { | |||||
| img.onload = function () { | |||||
| canvas.width = img.width; | |||||
| canvas.height = img.height; | |||||
| context.drawImage(img, 0, 0); | |||||
| canvas.toBlob( | |||||
| function (compressedBlob) { | |||||
| resolve(compressedBlob); | |||||
| }, | |||||
| 0.5 | |||||
| ); // 指定导出的图像类型和压缩质量 | |||||
| }; | |||||
| }); | |||||
| // img.src = URL.createObjectURL(data); | |||||
| const canvasData = await getCanvasData; | |||||
| // --------------------------------------------- | |||||
| let formData = new FormData(); | |||||
| // formData.append('file', data, timestamp + '.png'); | |||||
| console.log(canvasData, '压缩图片数据'); | |||||
| formData.append('file', canvasData, timestamp + '.png'); | |||||
| that.loading = false; | |||||
| // console.log(that.ImgUrl, 'dasdasd') | |||||
| // 发请求 | |||||
| const AccessToken = localStorage.getItem('AccessToken'); | |||||
| that | |||||
| .$axios({ | |||||
| method: 'post', | |||||
| url: process.env.VUE_APP_API_ROOT + `/api/upload/awsImgUpload`, | |||||
| headers: { | |||||
| 'content-type': 'multipart/form-data', | |||||
| token: AccessToken, | |||||
| 'Access-Control-Allow-Credentials': true | |||||
| }, | |||||
| data: formData | |||||
| }) | |||||
| .then(async res => { | |||||
| // console.log(res.data.data.url) | |||||
| const res1 = await saveImgApi({ | |||||
| type: that.type, | |||||
| videoType: that.videoType, | |||||
| material: res.data.data.url | |||||
| }); | |||||
| // 重新获取列表 | |||||
| await that.$parent.$parent.getMyBGIListApi(); | |||||
| await that.$parent.$parent.getMyScListApi(); | |||||
| if (this.type == 4) { | |||||
| that.$parent.$parent.changeShowBGIList(1); | |||||
| } | |||||
| if (this.type == 5) { | |||||
| that.$parent.$parent.changeShowBGIList(3); | |||||
| } | |||||
| that.loadingShow = false; | |||||
| that.showCropper = false; | |||||
| Toast.success('上传成功'); | |||||
| }); | |||||
| }); | |||||
| }, | |||||
| // 点击取消 | |||||
| onClickLeft() { | |||||
| this.loadingShow = false; | |||||
| this.showCropper = false; | |||||
| this.$parent.showPhotoUploader = false; | |||||
| }, | |||||
| // 上传图片 | |||||
| async pushImg(data) { | |||||
| try { | |||||
| const res = await awsImgUpload(data); | |||||
| this.loadingShow = false; | |||||
| this.showCropper = false; | |||||
| Toast.success('上传成功'); | |||||
| } catch (error) { | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| //图片转base64,异步 | |||||
| toBase64(file) { | |||||
| let that = this; | |||||
| return new Promise((resolve, reject) => { | |||||
| const reader = new FileReader(); | |||||
| reader.onload = () => { | |||||
| // base64结果 | |||||
| that.ImgUrl = this.result; | |||||
| that.loading = false; | |||||
| }; | |||||
| reader.onerror = reject; | |||||
| reader.readAsDataURL(file); | |||||
| }); | |||||
| }, | |||||
| // base64 转二进制 | |||||
| base64ToBinary(base64) { | |||||
| const binaryStr = window.atob(base64); | |||||
| const len = binaryStr.length; | |||||
| const bytes = new Uint8Array(len); | |||||
| for (let i = 0; i < len; ++i) { | |||||
| bytes[i] = binaryStr.charCodeAt(i); | |||||
| } | |||||
| return bytes; | |||||
| } | |||||
| }, | |||||
| mounted() {} | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| // /deep/.cropper-container { | |||||
| // z-index: 2005 !important; | |||||
| // } | |||||
| // .uploder{ | |||||
| // overflow: hidden; | |||||
| // } | |||||
| /deep/.van-nav-bar__content { | |||||
| height: 8vh; | |||||
| background-color: #ccc; | |||||
| } | |||||
| /deep/.van-hairline--bottom::after { | |||||
| // height: 8vh; | |||||
| } | |||||
| /deep/.cropper-view-box { | |||||
| outline: 2px dashed #fff !important; | |||||
| } | |||||
| /deep/.crop-point { | |||||
| background-color: auto !important; | |||||
| } | |||||
| /deep/.van-loading { | |||||
| position: absolute; | |||||
| // color: red; | |||||
| z-index: 9999; | |||||
| left: 50%; | |||||
| top: 50%; | |||||
| margin-left: -55px; | |||||
| margin-top: -30px; | |||||
| background: rgba(0, 0, 0, 0.3); | |||||
| padding: 10px 30px; | |||||
| border-radius: 25px; | |||||
| } | |||||
| .uploadava { | |||||
| // width: 100%; | |||||
| // width: 100vw; | |||||
| height: 94vh; | |||||
| .update-avatar { | |||||
| height: 100%; | |||||
| text-align: center; | |||||
| .update-avatar-line { | |||||
| width: 100%; | |||||
| height: 1px; | |||||
| background-color: #979797; | |||||
| } | |||||
| .avatar-select-type { | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding-bottom: 4px; | |||||
| .upload-avator { | |||||
| padding: 14px; | |||||
| } | |||||
| } | |||||
| p { | |||||
| margin: 15px 0 30px; | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding: 15px 0 18px; | |||||
| } | |||||
| } | |||||
| .cropper-container { | |||||
| position: relative; | |||||
| width: 100%; | |||||
| height: 94vh; | |||||
| // height: 100%; | |||||
| /deep/ .van-nav-bar { | |||||
| position: absolute; | |||||
| z-index: 999; | |||||
| width: 100%; | |||||
| bottom: 0px; | |||||
| left: 0px; | |||||
| height: 6vh; | |||||
| background-color: rgba(0, 0, 0, 0.87); | |||||
| :global(.van-nav-bar__text) { | |||||
| color: #000; | |||||
| // font-size: $font-size-normal-x; | |||||
| } | |||||
| :global(.van-nav-bar__text:nth-child(2)) { | |||||
| color: #000; | |||||
| font-weight: 500; | |||||
| } | |||||
| // :global(.van-icon) { | |||||
| // color: red; | |||||
| // } | |||||
| } | |||||
| } | |||||
| .vue-cropper { | |||||
| background: #000; | |||||
| width: 100%; | |||||
| height: 88vh; | |||||
| padding-top: 46px; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| <template> | |||||
| <div class="uploder"> | |||||
| <div class="change-photo-setter" style="height: 240px; width: 160px"> | |||||
| <van-uploader | |||||
| ref="uploader" | |||||
| class="sett-item" | |||||
| :before-read="beforeRead" | |||||
| style="height: 240px; width: 160px" | |||||
| > | |||||
| <div style="height: 240px; width: 160px"> | |||||
| <!-- <img :src="ImgUrl" alt="" /> --> | |||||
| </div> | |||||
| </van-uploader> | |||||
| </div> | |||||
| <div class="uploadava"> | |||||
| <!-- van-popup有bug,某些1情况需要绑定app为根 --> | |||||
| <van-popup | |||||
| :get-container="this.isAndroid ? '' : '#app'" | |||||
| class="vanPopup" | |||||
| duration="0" | |||||
| v-model="showCropper" | |||||
| position="top" | |||||
| :style="{ height: '100%' }" | |||||
| > | |||||
| <div | |||||
| class="cropper-container" | |||||
| :style="{ height: '92vh', position: 'relative' }" | |||||
| > | |||||
| <van-loading | |||||
| v-show="loadingShow" | |||||
| size="50" | |||||
| color="#fff" | |||||
| vertical | |||||
| text-color="#fff" | |||||
| >上传中...</van-loading | |||||
| > | |||||
| <!-- 切图组件 --> | |||||
| <!-- :outputSize="option.outputSize" --> | |||||
| <vueCropper | |||||
| :style="{ backgroundImage: 'none', height: '92vh' }" | |||||
| 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 style="display: flex; justify-content: space-between; padding: 10px; height: 8vh"> | |||||
| <div @click="onClickLeft">取消</div> | |||||
| <div @click="onClickRight">确定</div> | |||||
| </div> --> | |||||
| <van-nav-bar | |||||
| :style="{ height: '8vh', width: '100%', position: 'absolute' }" | |||||
| left-text="取消" | |||||
| right-text="确定" | |||||
| @click-left="onClickLeft" | |||||
| @click-right="onClickRight" | |||||
| /> | |||||
| </div> | |||||
| </van-popup> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { awsImgUpload } from "@/api/editModel"; | |||||
| import { Toast } from "vant"; | |||||
| import { VueCropper } from "vue-cropper"; | |||||
| import { scrollToID, getDeviceType } from "../utils"; | |||||
| import { saveImgApi } from "../api/editModel"; | |||||
| import { watch } from "vue"; | |||||
| export default { | |||||
| name: "uploadAva", | |||||
| components: { | |||||
| VueCropper, | |||||
| }, | |||||
| props: { | |||||
| showAta: { | |||||
| default: false, | |||||
| type: Boolean, | |||||
| }, | |||||
| avaUrl: { | |||||
| default: "", | |||||
| type: String, | |||||
| }, | |||||
| type: { | |||||
| default: "", | |||||
| type: Number, | |||||
| }, | |||||
| videoType: { | |||||
| default: null, | |||||
| type: Number, | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| isAndroid: false, //判断是不是ios | |||||
| aaa: null, | |||||
| ImgUrl: "", | |||||
| show: true, // 上传类型的弹窗 | |||||
| imageFileName: "", | |||||
| showCropper: false, // 裁剪的弹窗 | |||||
| option: { | |||||
| 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", // 图片默认渲染方式 | |||||
| }, | |||||
| loadingShow: false, // 是否展示loading | |||||
| }; | |||||
| }, | |||||
| created() { | |||||
| const deviceType = getDeviceType(); | |||||
| this.isAndroid = false; | |||||
| if (!deviceType) { | |||||
| // 设备类型为pc | |||||
| this.isAndroid = false; | |||||
| } else { | |||||
| if (deviceType[0] == "Android") { | |||||
| // 设备类型为安卓 | |||||
| this.isAndroid = true; | |||||
| } else { | |||||
| // 其他设备 | |||||
| this.isAndroid = false; | |||||
| } | |||||
| } | |||||
| if (this.type == 4 && this.videoType == 1) { | |||||
| this.option.autoCropWidth = 1080 + "px"; // 默认生成截图框宽度 | |||||
| this.option.autoCropHeight = 1920 + "px"; // 默认生成截图框高度 | |||||
| this.option.fixed = true; | |||||
| this.option.fixedNumber = [1080, 1920]; | |||||
| } | |||||
| if (this.type == 4 && this.videoType == 2) { | |||||
| this.option.autoCropWidth = 1920 + "px"; // 默认生成截图框宽度 | |||||
| this.option.autoCropHeight = 1080 + "px"; // 默认生成截图框高度 | |||||
| this.option.fixed = true; | |||||
| this.option.fixedNumber = [1920, 1080]; | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| beforeRead(file) { | |||||
| // console.log(file) | |||||
| if (file.type !== "image/jpeg" && file.type !== "image/png") { | |||||
| this.$toast("请上传 jpg/png 格式图片"); | |||||
| return false; | |||||
| } | |||||
| // let data = window.URL.createObjectURL(new Blob([file])); | |||||
| let data = window.URL.createObjectURL(file); | |||||
| console.log(data); | |||||
| this.option.img = data; //给裁剪图片的路径 | |||||
| this.showCropper = true; | |||||
| return false; | |||||
| }, | |||||
| // 点击裁剪的选择 | |||||
| onClickRight() { | |||||
| const timestamp = Date.now(); | |||||
| let that = this; | |||||
| this.loadingShow = true; | |||||
| // console.log(this.$refs.cropper); | |||||
| this.$refs.cropper.getCropData((data) => { | |||||
| // do something | |||||
| // console.log(data, 'base64'); | |||||
| }); | |||||
| this.$refs.cropper.getCropBlob(async (data) => { | |||||
| console.log(data, "上传图片数据"); | |||||
| // 利用canvas压缩图片 | |||||
| const img = new Image(); | |||||
| img.src = URL.createObjectURL(data); | |||||
| const canvas = document.createElement("canvas"); | |||||
| const context = canvas.getContext("2d"); | |||||
| const getCanvasData = new Promise((resolve, reject) => { | |||||
| img.onload = function () { | |||||
| canvas.width = img.width; | |||||
| canvas.height = img.height; | |||||
| context.drawImage(img, 0, 0); | |||||
| canvas.toBlob( | |||||
| function (compressedBlob) { | |||||
| resolve(compressedBlob); | |||||
| }, | |||||
| 0.5 | |||||
| ); // 指定导出的图像类型和压缩质量 | |||||
| }; | |||||
| }); | |||||
| // img.src = URL.createObjectURL(data); | |||||
| const canvasData = await getCanvasData; | |||||
| // --------------------------------------------- | |||||
| let formData = new FormData(); | |||||
| // formData.append('file', data, timestamp + '.png'); | |||||
| console.log(canvasData, "压缩图片数据"); | |||||
| formData.append("file", canvasData, timestamp + ".png"); | |||||
| that.loading = false; | |||||
| // console.log(that.ImgUrl, 'dasdasd') | |||||
| // 发请求 | |||||
| const AccessToken = localStorage.getItem("AccessToken"); | |||||
| that | |||||
| .$axios({ | |||||
| method: "post", | |||||
| url: process.env.VUE_APP_API_ROOT + `/api/upload/awsImgUpload`, | |||||
| headers: { | |||||
| "content-type": "multipart/form-data", | |||||
| token: AccessToken, | |||||
| "Access-Control-Allow-Credentials": true, | |||||
| }, | |||||
| data: formData, | |||||
| }) | |||||
| .then(async (res) => { | |||||
| if (res.data.code == 200) { | |||||
| Toast.success("上传成功"); | |||||
| } else { | |||||
| Toast.fail(res.data.message); | |||||
| } | |||||
| that.loadingShow = false; | |||||
| that.showCropper = false; | |||||
| // console.log(res.data.data.url) | |||||
| const res1 = await saveImgApi({ | |||||
| type: that.type, | |||||
| videoType: that.videoType, | |||||
| material: res.data.data.url, | |||||
| }); | |||||
| // 重新获取列表 | |||||
| that.$parent.$parent.$parent.pageNum2 = 1; | |||||
| that.$parent.$parent.$parent.pageNum4 = 1; | |||||
| that.$parent.$parent.$parent.finished2 = false; | |||||
| that.$parent.$parent.$parent.finished4 = false; | |||||
| that.$parent.$parent.$parent.myBGIList = []; | |||||
| that.$parent.$parent.$parent.myScList = []; | |||||
| await that.$parent.$parent.$parent.getMyScListApi("reset"); | |||||
| await that.$parent.$parent.$parent.getMyBGIListApi("reset"); | |||||
| console.log(that.$parent.$parent.$parent.pageNum4, "444"); | |||||
| if (this.type == 4) { | |||||
| that.$parent.$parent.$parent.changeShowBGIList(1); | |||||
| } | |||||
| if (this.type == 5) { | |||||
| that.$parent.$parent.$parent.changeShowBGIList(3); | |||||
| } | |||||
| that.loadingShow = false; | |||||
| that.showCropper = false; | |||||
| console.log(res); | |||||
| }); | |||||
| }); | |||||
| }, | |||||
| // 点击取消 | |||||
| onClickLeft() { | |||||
| this.loadingShow = false; | |||||
| this.showCropper = false; | |||||
| this.$parent.showPhotoUploader = false; | |||||
| }, | |||||
| // 上传图片 | |||||
| async pushImg(data) { | |||||
| try { | |||||
| const res = await awsImgUpload(data); | |||||
| this.loadingShow = false; | |||||
| this.showCropper = false; | |||||
| Toast.success("上传成功"); | |||||
| } catch (error) { | |||||
| console.log(error, "error"); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| //图片转base64,异步 | |||||
| toBase64(file) { | |||||
| let that = this; | |||||
| return new Promise((resolve, reject) => { | |||||
| const reader = new FileReader(); | |||||
| reader.onload = () => { | |||||
| // base64结果 | |||||
| that.ImgUrl = this.result; | |||||
| that.loading = false; | |||||
| }; | |||||
| reader.onerror = reject; | |||||
| reader.readAsDataURL(file); | |||||
| }); | |||||
| }, | |||||
| // base64 转二进制 | |||||
| base64ToBinary(base64) { | |||||
| const binaryStr = window.atob(base64); | |||||
| const len = binaryStr.length; | |||||
| const bytes = new Uint8Array(len); | |||||
| for (let i = 0; i < len; ++i) { | |||||
| bytes[i] = binaryStr.charCodeAt(i); | |||||
| } | |||||
| return bytes; | |||||
| }, | |||||
| }, | |||||
| mounted() {}, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| // /deep/.cropper-container { | |||||
| // z-index: 2005 !important; | |||||
| // } | |||||
| // .uploder{ | |||||
| // overflow: hidden; | |||||
| // } | |||||
| /deep/.van-nav-bar__content { | |||||
| height: 8vh; | |||||
| background-color: #ccc; | |||||
| } | |||||
| /deep/.van-hairline--bottom::after { | |||||
| // height: 8vh; | |||||
| } | |||||
| /deep/.cropper-view-box { | |||||
| outline: 2px dashed #fff !important; | |||||
| } | |||||
| /deep/.crop-point { | |||||
| background-color: auto !important; | |||||
| } | |||||
| /deep/.van-loading { | |||||
| position: absolute; | |||||
| // color: red; | |||||
| z-index: 9999; | |||||
| left: 50%; | |||||
| top: 50%; | |||||
| margin-left: -55px; | |||||
| margin-top: -30px; | |||||
| background: rgba(0, 0, 0, 0.3); | |||||
| padding: 10px 30px; | |||||
| border-radius: 25px; | |||||
| } | |||||
| .uploadava { | |||||
| // width: 100%; | |||||
| // width: 100vw; | |||||
| height: 94vh; | |||||
| .update-avatar { | |||||
| height: 100%; | |||||
| text-align: center; | |||||
| .update-avatar-line { | |||||
| width: 100%; | |||||
| height: 1px; | |||||
| background-color: #979797; | |||||
| } | |||||
| .avatar-select-type { | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding-bottom: 4px; | |||||
| .upload-avator { | |||||
| padding: 14px; | |||||
| } | |||||
| } | |||||
| p { | |||||
| margin: 15px 0 30px; | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding: 15px 0 18px; | |||||
| } | |||||
| } | |||||
| .cropper-container { | |||||
| position: relative; | |||||
| width: 100%; | |||||
| height: 94vh; | |||||
| // height: 100%; | |||||
| /deep/ .van-nav-bar { | |||||
| position: absolute; | |||||
| z-index: 999; | |||||
| width: 100%; | |||||
| bottom: 0px; | |||||
| left: 0px; | |||||
| height: 6vh; | |||||
| background-color: rgba(0, 0, 0, 0.87); | |||||
| :global(.van-nav-bar__text) { | |||||
| color: #000; | |||||
| // font-size: $font-size-normal-x; | |||||
| } | |||||
| :global(.van-nav-bar__text:nth-child(2)) { | |||||
| color: #000; | |||||
| font-weight: 500; | |||||
| } | |||||
| // :global(.van-icon) { | |||||
| // color: red; | |||||
| // } | |||||
| } | |||||
| } | |||||
| .vue-cropper { | |||||
| background: #000; | |||||
| width: 100%; | |||||
| height: 88vh; | |||||
| padding-top: 46px; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -1,137 +1,132 @@ | |||||
| import Vue from 'vue' | |||||
| import VueRouter from 'vue-router' | |||||
| Vue.use(VueRouter) | |||||
| // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 | |||||
| const originalPush = VueRouter.prototype.push | |||||
| VueRouter.prototype.push = function push(location) { | |||||
| return originalPush.call(this, location).catch(err => err) | |||||
| } | |||||
| const routes = [ | |||||
| { | |||||
| path: '/', | |||||
| name: 'Home', | |||||
| // component: Home | |||||
| component: () => import("../components/home/home"), | |||||
| }, | |||||
| { | |||||
| path: '/aboutUs', | |||||
| name: 'aboutUs', | |||||
| component: () => import("../components/aboutUs/aboutUs"), | |||||
| }, | |||||
| // 登录 | |||||
| { | |||||
| path: '/login', | |||||
| name: 'login', | |||||
| component: () => import("../views/login/login"), | |||||
| }, | |||||
| // 创作中心首页 | |||||
| { | |||||
| path: '/myPage', | |||||
| name: 'myPage', | |||||
| component: () => import("../views/myPage/myPage"), | |||||
| }, | |||||
| // 选择模板 | |||||
| { | |||||
| path: '/chooseModel', | |||||
| name: 'chooseModel', | |||||
| component: () => import("../views/model/chooseModel"), | |||||
| }, | |||||
| // 模板预览new | |||||
| { | |||||
| path: '/previewModel', | |||||
| name: 'previewModel', | |||||
| component: () => import("../views/model/previewModel"), | |||||
| }, | |||||
| // 编辑模板new | |||||
| { | |||||
| path: '/editModel', | |||||
| name: 'editModel', | |||||
| component: () => import("../views/model/editModel"), | |||||
| }, | |||||
| // 编辑位置new | |||||
| { | |||||
| path: '/editPosition', | |||||
| name: 'editPosition', | |||||
| component: () => import("../views/model/editPosition"), | |||||
| }, | |||||
| // 编辑位置new | |||||
| { | |||||
| path: '/editPosition-chatgpt', | |||||
| name: 'editPosition-chatgpt', | |||||
| component: () => import("../views/model/editPosition-chatgpt"), | |||||
| }, | |||||
| // 下载预览视频页 | |||||
| { | |||||
| path: '/videoDownload', | |||||
| name: 'videoDownload', | |||||
| component: () => import("../views/videoDownload/videoDownload"), | |||||
| } | |||||
| , | |||||
| //视频生成中页 | |||||
| { | |||||
| path: '/videoCreate', | |||||
| name: 'videoCreate', | |||||
| component: () => import("../views/model/videoCreate"), | |||||
| }, | |||||
| , | |||||
| //视频生成失败 | |||||
| { | |||||
| path: '/videoFail', | |||||
| name: 'videoFail', | |||||
| component: () => import("../views/model/videoFail"), | |||||
| }, | |||||
| // 聊天首页new | |||||
| { | |||||
| path: '/chat', | |||||
| name: 'chat', | |||||
| component: () => import("@/views/chat/chat"), | |||||
| }, | |||||
| , | |||||
| // 聊天首页new | |||||
| { | |||||
| path: '/chatgpt', | |||||
| name: 'chatgpt', | |||||
| component: () => import("@/views/chatgpt/chatgpt"), | |||||
| }, | |||||
| { | |||||
| path: '/chatgpt-getmp3', | |||||
| name: 'chatgpt-getmp3', | |||||
| component: () => import("@/views/chatgpt/chatgpt-getmp3"), | |||||
| }, | |||||
| , | |||||
| // 音频new | |||||
| { | |||||
| path: '/audio', | |||||
| name: 'audio', | |||||
| component: () => import("@/views/audio/audio"), | |||||
| }, | |||||
| // 录入文案 | |||||
| { | |||||
| path: '/getPaper', | |||||
| name: 'getPaper', | |||||
| component: () => import("../views/model/getPaper"), | |||||
| }, | |||||
| // 合成视频 | |||||
| { | |||||
| path: '/generateVideo', | |||||
| name: 'generateVideo', | |||||
| component: () => import("../views/model/generateVideo"), | |||||
| }, | |||||
| // 下载视频 | |||||
| { | |||||
| path: '/downloadVideo', | |||||
| name: 'downloadVideo', | |||||
| component: () => import("../views/model/downloadVideo"), | |||||
| }, | |||||
| ] | |||||
| const router = new VueRouter({ | |||||
| // mode: 'history', | |||||
| base: process.env.BASE_URL, | |||||
| routes | |||||
| }) | |||||
| export default router | |||||
| import Vue from 'vue' | |||||
| import VueRouter from 'vue-router' | |||||
| Vue.use(VueRouter) | |||||
| // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 | |||||
| const originalPush = VueRouter.prototype.push | |||||
| VueRouter.prototype.push = function push(location) { | |||||
| return originalPush.call(this, location).catch(err => err) | |||||
| } | |||||
| const routes = [ | |||||
| { | |||||
| path: '/', | |||||
| name: 'Home', | |||||
| // component: Home | |||||
| component: () => import("../components/home/home"), | |||||
| }, | |||||
| { | |||||
| path: '/aboutUs', | |||||
| name: 'aboutUs', | |||||
| component: () => import("../components/aboutUs/aboutUs"), | |||||
| }, | |||||
| // 登录 | |||||
| { | |||||
| path: '/login', | |||||
| name: 'login', | |||||
| component: () => import("../views/login/login"), | |||||
| }, | |||||
| // 创作中心首页 | |||||
| { | |||||
| path: '/myPage', | |||||
| name: 'myPage', | |||||
| component: () => import("../views/myPage/myPage"), | |||||
| }, | |||||
| // 选择模板 | |||||
| { | |||||
| path: '/chooseModel', | |||||
| name: 'chooseModel', | |||||
| component: () => import("../views/model/chooseModel"), | |||||
| }, | |||||
| // 模板预览new | |||||
| { | |||||
| path: '/previewModel', | |||||
| name: 'previewModel', | |||||
| component: () => import("../views/model/previewModel"), | |||||
| }, | |||||
| // 编辑模板new | |||||
| { | |||||
| path: '/editModel', | |||||
| name: 'editModel', | |||||
| component: () => import("../views/model/editModel"), | |||||
| }, | |||||
| // 编辑位置new | |||||
| { | |||||
| path: '/editPosition', | |||||
| name: 'editPosition', | |||||
| component: () => import("../views/model/editPosition"), | |||||
| }, | |||||
| // 下载预览视频页 | |||||
| { | |||||
| path: '/videoDownload', | |||||
| name: 'videoDownload', | |||||
| component: () => import("../views/videoDownload/videoDownload"), | |||||
| } | |||||
| , | |||||
| //视频生成中页 | |||||
| { | |||||
| path: '/videoCreate', | |||||
| name: 'videoCreate', | |||||
| component: () => import("../views/model/videoCreate"), | |||||
| }, | |||||
| , | |||||
| //视频生成失败 | |||||
| { | |||||
| path: '/videoFail', | |||||
| name: 'videoFail', | |||||
| component: () => import("../views/model/videoFail"), | |||||
| }, | |||||
| // 聊天首页new | |||||
| { | |||||
| path: '/chat', | |||||
| name: 'chat', | |||||
| component: () => import("@/views/chat/chat"), | |||||
| }, | |||||
| , | |||||
| // 聊天首页new | |||||
| { | |||||
| path: '/chatgpt', | |||||
| name: 'chatgpt', | |||||
| component: () => import("@/views/chatgpt/chatgpt"), | |||||
| }, | |||||
| { | |||||
| path: '/chatgpt-getmp3', | |||||
| name: 'chatgpt-getmp3', | |||||
| component: () => import("@/views/chatgpt/chatgpt-getmp3"), | |||||
| }, | |||||
| , | |||||
| // 音频new | |||||
| { | |||||
| path: '/audio', | |||||
| name: 'audio', | |||||
| component: () => import("@/views/audio/audio"), | |||||
| }, | |||||
| // 录入文案 | |||||
| { | |||||
| path: '/getPaper', | |||||
| name: 'getPaper', | |||||
| component: () => import("../views/model/getPaper"), | |||||
| }, | |||||
| // 合成视频 | |||||
| { | |||||
| path: '/generateVideo', | |||||
| name: 'generateVideo', | |||||
| component: () => import("../views/model/generateVideo"), | |||||
| }, | |||||
| // 下载视频 | |||||
| { | |||||
| path: '/downloadVideo', | |||||
| name: 'downloadVideo', | |||||
| component: () => import("../views/model/downloadVideo"), | |||||
| }, | |||||
| ] | |||||
| const router = new VueRouter({ | |||||
| // mode: 'history', | |||||
| base: process.env.BASE_URL, | |||||
| routes | |||||
| }) | |||||
| export default router | |||||
| @@ -1,280 +0,0 @@ | |||||
| <template> | |||||
| <div class="uploder"> | |||||
| <div class="change-photo-setter"> | |||||
| <van-uploader | |||||
| class="sett-item" | |||||
| :before-read="beforeRead" | |||||
| accept="image/*" | |||||
| > | |||||
| <div>照片图库</div> | |||||
| <img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> | |||||
| </van-uploader> | |||||
| <van-uploader | |||||
| class="sett-item" | |||||
| :before-read="beforeRead" | |||||
| capture="camera" | |||||
| > | |||||
| <div>拍照</div> | |||||
| <img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> | |||||
| </van-uploader> | |||||
| <van-uploader class="sett-item" :before-read="beforeRead"> | |||||
| <div>选取文件</div> | |||||
| <img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> | |||||
| </van-uploader> | |||||
| </div> | |||||
| <div class="uploadava"> | |||||
| <!-- <van-overlay :show="show" @click="$emit('update:showAta', false),show = false"> | |||||
| <div class="update-avatar"> | |||||
| <ul class="avatar-select-type" @click.stop> | |||||
| <van-uploader :before-read="beforeRead" capture="camera"> | |||||
| <li class="select-type-photo upload-avator">拍摄</li> | |||||
| </van-uploader> | |||||
| <li class="update-avatar-line"></li> | |||||
| <van-uploader :before-read="beforeRead"> | |||||
| <li class="select-type-album upload-avator">从手机相册选择</li> | |||||
| </van-uploader> | |||||
| </ul> | |||||
| <p @click.stop="show = false,$emit('update:showAta', false)">取消</p> | |||||
| </div> | |||||
| </van-overlay> --> | |||||
| <van-popup | |||||
| duration="0" | |||||
| v-model="showCropper" | |||||
| position="top" | |||||
| :style="{ height: '100%' }" | |||||
| > | |||||
| <div class="cropper-container"> | |||||
| <van-loading | |||||
| v-show="loadingShow" | |||||
| size="50" | |||||
| color="#fff" | |||||
| vertical | |||||
| text-color="#fff" | |||||
| >上传中...</van-loading | |||||
| > | |||||
| <vueCropper | |||||
| 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" | |||||
| /> | |||||
| <van-nav-bar | |||||
| left-text="取消" | |||||
| right-text="选择" | |||||
| @click-left="onClickLeft" | |||||
| @click-right="getCropBlob" | |||||
| /> | |||||
| </div> | |||||
| </van-popup> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { VueCropper } from 'vue-cropper' | |||||
| export default { | |||||
| name: 'uploadAva', | |||||
| components: { | |||||
| VueCropper | |||||
| }, | |||||
| props: { | |||||
| showAta: { | |||||
| default: false, | |||||
| type: Boolean | |||||
| }, | |||||
| avaUrl: { | |||||
| default: '', | |||||
| type: String | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| show: true, // 上传类型的弹窗 | |||||
| imageFileName: '', | |||||
| showCropper: false, // 裁剪的弹窗 | |||||
| option: { | |||||
| img: '', | |||||
| outputSize: 0.8, | |||||
| info: false, // 裁剪框的大小信息 | |||||
| outputType: 'jpeg', // 裁剪生成图片的格式 | |||||
| canScale: true, // 图片是否允许滚轮缩放 | |||||
| autoCrop: true, // 是否默认生成截图框 | |||||
| autoCropWidth: window.innerWidth - 100 + 'px', // 默认生成截图框宽度 | |||||
| autoCropHeight: window.innerWidth - 100 + 'px', // 默认生成截图框高度 | |||||
| high: true, // 是否按照设备的dpr 输出等比例图片 | |||||
| fixedBox: false, // 固定截图框大小 不允许改变 | |||||
| fixed: true, // 是否开启截图框宽高固定比例 | |||||
| fixedNumber: [1, 1], // 截图框的宽高比例 | |||||
| full: true, // 是否输出原图比例的截图 | |||||
| canMoveBox: true, // 截图框能否拖动 | |||||
| original: false, // 上传图片按照原始比例渲染 | |||||
| centerBox: true, // 截图框是否被限制在图片里面 | |||||
| infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 | |||||
| mode: '100% auto' // 图片默认渲染方式 | |||||
| }, | |||||
| loadingShow: false // 是否展示loading | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| // 点击上传按钮 | |||||
| beforeRead(file) { | |||||
| console.log(file, '111') | |||||
| if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | |||||
| this.$toast('请上传 jpg/png 格式图片') | |||||
| return false | |||||
| } | |||||
| console.log(111, file) | |||||
| this.showCropper = true | |||||
| this.imageToBase64(file) | |||||
| this.imageFileName = file.name | |||||
| }, | |||||
| // 转64 | |||||
| imageToBase64(file) { | |||||
| let reader = new FileReader() | |||||
| console.log(reader) | |||||
| reader.readAsDataURL(file) | |||||
| reader.onload = () => { | |||||
| console.log(reader.result, '222') | |||||
| this.option.img = reader.result | |||||
| } | |||||
| }, | |||||
| // 处理图片, | |||||
| getCropBlob() { | |||||
| // let formData = new FormData() | |||||
| this.loadingShow = true | |||||
| console.log(this.option) | |||||
| console.log(this.$refs.cropper) | |||||
| // cropper插件上的getCropBlob()方法,data就是截图的图片 | |||||
| this.$refs.cropper.getCropBlob((data) => { | |||||
| // formData.append('headFile', data, this.imageFileName) | |||||
| // formData.append('id', this.$store.getters.user.userId) | |||||
| console.log(data) | |||||
| // uploadAva(formData).then((res) => { | |||||
| // this.showCropper = false | |||||
| this.$emit('update:showAta', false) | |||||
| // this.$emit('update:avaUrl', res.data) | |||||
| // }) | |||||
| }) | |||||
| }, | |||||
| onClickLeft() { | |||||
| this.loadingShow = false | |||||
| this.showCropper = false | |||||
| this.$parent.showPhotoUploader = false | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| // .uploder{ | |||||
| // overflow: hidden; | |||||
| // } | |||||
| /deep/.cropper-view-box { | |||||
| outline: 2px dashed #fff !important; | |||||
| } | |||||
| /deep/.crop-point { | |||||
| background-color: auto !important; | |||||
| } | |||||
| /deep/.van-loading { | |||||
| position: absolute; | |||||
| // color: red; | |||||
| z-index: 9999; | |||||
| left: 50%; | |||||
| top: 50%; | |||||
| margin-left: -55px; | |||||
| margin-top: -30px; | |||||
| background: rgba(0, 0, 0, 0.3); | |||||
| padding: 10px 30px; | |||||
| border-radius: 25px; | |||||
| } | |||||
| .change-photo-setter { | |||||
| width: 400px; | |||||
| background: #fff; | |||||
| position: absolute; | |||||
| top: 11%; | |||||
| left: 40px; | |||||
| z-index: 300; | |||||
| .sett-item { | |||||
| width: 100%; | |||||
| } | |||||
| /deep/.van-uploader__input-wrapper { | |||||
| width: 100%; | |||||
| display: flex; | |||||
| flex-direction: row; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| padding: 15px; | |||||
| img { | |||||
| width: 40px; | |||||
| height: 40px; | |||||
| display: block; | |||||
| } | |||||
| } | |||||
| .sett-item:first-child { | |||||
| border-bottom: 2px solid #ccc; | |||||
| } | |||||
| } | |||||
| .uploadava { | |||||
| .update-avatar { | |||||
| height: 100%; | |||||
| text-align: center; | |||||
| .update-avatar-line { | |||||
| width: 100%; | |||||
| height: 1px; | |||||
| background-color: #979797; | |||||
| } | |||||
| .avatar-select-type { | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding-bottom: 4px; | |||||
| .upload-avator { | |||||
| padding: 14px; | |||||
| } | |||||
| } | |||||
| p { | |||||
| margin: 15px 0 30px; | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding: 15px 0 18px; | |||||
| } | |||||
| } | |||||
| .cropper-container { | |||||
| height: 94vh; | |||||
| .van-nav-bar { | |||||
| background-color: rgba(0, 0, 0, 0.87); | |||||
| :global(.van-nav-bar__text) { | |||||
| color: #fff; | |||||
| // font-size: $font-size-normal-x; | |||||
| } | |||||
| :global(.van-nav-bar__text:nth-child(2)) { | |||||
| color: #000; | |||||
| font-weight: 500; | |||||
| } | |||||
| // :global(.van-icon) { | |||||
| // color: red; | |||||
| // } | |||||
| } | |||||
| } | |||||
| .vue-cropper { | |||||
| background: #000; | |||||
| height: 100%; | |||||
| padding-top: 46px; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -1,267 +0,0 @@ | |||||
| <template> | |||||
| <div :class="inPage ? 'page active' : 'page'"> | |||||
| <div id="top"></div> | |||||
| <div class="content" ref="fatherBox"> | |||||
| <!-- 控制框 --> | |||||
| <div class="control"> | |||||
| <div @click="controlImg(1)">放大</div> | |||||
| <div @click="controlImg(2)">缩小</div> | |||||
| <div @click="controlImg(3)">上移一层</div> | |||||
| <div @click="controlImg(4)">下移一层</div> | |||||
| </div> | |||||
| <div | |||||
| :id="'item' + index" | |||||
| @touchmove="onMouseMove(index)" | |||||
| @touchstart="onMouseDown(index)" | |||||
| @touchend="onMouseUp(index)" | |||||
| v-for="(item, index) in materialList" | |||||
| :key="index" | |||||
| class="material" | |||||
| :style="{ | |||||
| transform: 'scale(' + item.scale + ') ', | |||||
| zIndex: item.zIndex, | |||||
| top: item.y + 'px', | |||||
| left: item.x + 'px' | |||||
| }" | |||||
| > | |||||
| <div>{{ item.text }}</div> | |||||
| <img :src="item.url" alt="" /> | |||||
| <!-- 边框 --> | |||||
| <div :class="domIndex == index ? 'active' : ''"></div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| // 组件 | |||||
| import Vue from 'vue' | |||||
| import { Toast } from 'vant' | |||||
| import { mapState, mapActions } from 'vuex' | |||||
| // 工具 | |||||
| import { scrollToID } from '../../utils' | |||||
| Vue.use(Toast) | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| inPage: false, | |||||
| dragging: false, | |||||
| startX: 0, | |||||
| startY: 0, // 鼠标位置x y | |||||
| windowWidth: 0, | |||||
| windowHeight: 0, | |||||
| scale: 1, | |||||
| domIndex: -1, //当前点击的图片 | |||||
| materialList: [ | |||||
| { | |||||
| text: '小div1', | |||||
| url: 'img/BG@2x.b0cf224b.png', | |||||
| x: 300, // 相对左上角XY坐标 | |||||
| y: 300, | |||||
| scale: 1, //缩放 | |||||
| zIndex: 3 //层级 | |||||
| }, | |||||
| { | |||||
| text: '小div2', | |||||
| url: 'img/BG@2x.b0cf224b.png', | |||||
| x: 100, | |||||
| y: 0, | |||||
| scale: 1, | |||||
| zIndex: 13 | |||||
| }, | |||||
| { | |||||
| text: '小div3', | |||||
| url: '@/assets/icon/icon-trash', | |||||
| x: 0, | |||||
| y: 100, | |||||
| scale: 1, | |||||
| zIndex: 11 | |||||
| }, | |||||
| { | |||||
| text: '小div4', | |||||
| url: '../../assets/icon/icon-trash', | |||||
| x: 100, | |||||
| y: 100, | |||||
| scale: 1, | |||||
| zIndex: 10 | |||||
| }, | |||||
| { | |||||
| text: '小div5', | |||||
| url: '@/assets/icon/icon-trash', | |||||
| x: 200, | |||||
| y: 200, | |||||
| scale: 1, | |||||
| zIndex: 4 | |||||
| } | |||||
| ] | |||||
| } | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters | |||||
| }) | |||||
| // imageStyles() { | |||||
| // return this.images.map((image, index) => { | |||||
| // return { | |||||
| // zIndex: index, | |||||
| // width: `${image.width}px`, | |||||
| // height: `${image.height}px`, | |||||
| // position: 'absolute', | |||||
| // top: `${image.y}px`, | |||||
| // left: `${image.x}px`, | |||||
| // }; | |||||
| // }); | |||||
| // }, | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(['setCharacters']), | |||||
| // 鼠标按下事件 | |||||
| onMouseDown(index) { | |||||
| this.dragging = true | |||||
| this.domIndex = index | |||||
| // 记录点击瞬间的鼠标坐标 | |||||
| this.startX = event.touches[0].clientX | |||||
| this.startY = event.touches[0].clientY | |||||
| }, | |||||
| // 鼠标抬起 | |||||
| onMouseUp(index) { | |||||
| this.dragging = false | |||||
| // this.domIndex = -1 | |||||
| }, | |||||
| // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 | |||||
| onMouseMove(index) { | |||||
| // 禁止默认事件--下拉 | |||||
| event.preventDefault() | |||||
| if (!this.dragging) return | |||||
| if (this.domIndex != index) return | |||||
| console.log(event.touches[0]) | |||||
| const deltaX = event.touches[0].clientX - this.startX | |||||
| const deltaY = event.touches[0].clientY - this.startY | |||||
| console.log(deltaX) | |||||
| this.materialList[index].x += deltaX | |||||
| this.materialList[index].y += deltaY | |||||
| this.startX = event.touches[0].clientX | |||||
| this.startY = event.touches[0].clientY | |||||
| // 得到父子盒子信息 | |||||
| const fatherRect = this.$refs.fatherBox.getBoundingClientRect() | |||||
| const sonRect = document | |||||
| .getElementById(`item${index}`) | |||||
| .getBoundingClientRect() | |||||
| // 限制X轴 | |||||
| if (this.materialList[index].x < 0) { | |||||
| this.materialList[index].x = 0 | |||||
| } | |||||
| if (sonRect.left > fatherRect.width - sonRect.width / 2) { | |||||
| this.materialList[index].x = fatherRect.width - sonRect.width | |||||
| this.exceed() | |||||
| } | |||||
| // 限制Y轴 | |||||
| if (this.materialList[index].y < 0) { | |||||
| this.materialList[index].y = 0 | |||||
| } | |||||
| if (sonRect.top > fatherRect.height - sonRect.height / 2) { | |||||
| this.materialList[index].y = fatherRect.height - sonRect.height | |||||
| this.exceed() | |||||
| } | |||||
| }, | |||||
| // 控制台 | |||||
| controlImg(type) { | |||||
| if (this.domIndex == -1) { | |||||
| Toast('请选择素材') | |||||
| } | |||||
| if (type == 1) { | |||||
| this.materialList[this.domIndex].scale += 0.1 | |||||
| } | |||||
| if (type == 2) { | |||||
| this.materialList[this.domIndex].scale -= 0.1 | |||||
| } | |||||
| if (type == 3) { | |||||
| this.materialList[this.domIndex].zIndex += 1 | |||||
| } | |||||
| if (type == 4) { | |||||
| this.materialList[this.domIndex].zIndex -= 1 | |||||
| } | |||||
| }, | |||||
| // 素材超出显示范围 | |||||
| exceed() { | |||||
| Toast('素材超出显示范围') | |||||
| }, | |||||
| go(url) { | |||||
| this.$router.push(url) | |||||
| } | |||||
| }, | |||||
| created() {}, | |||||
| mounted() { | |||||
| this.inPage = true | |||||
| scrollToID('top') | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| * { | |||||
| box-sizing: content-box !important; | |||||
| } | |||||
| .control { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 50%; | |||||
| transform: translateX(-50%); | |||||
| display: flex; | |||||
| justify-content: space-around; | |||||
| width: 200px; | |||||
| height: 30px; | |||||
| text-align: center; | |||||
| line-height: 30px; | |||||
| background-color: #fff; | |||||
| z-index: 999999; | |||||
| } | |||||
| .page { | |||||
| transform: translateX(30%); | |||||
| opacity: 0; | |||||
| transition: all 0.5s; // global-transition | |||||
| &.active { | |||||
| opacity: 1; | |||||
| transform: translateX(0); | |||||
| } | |||||
| height: 100%; | |||||
| width: 100%; | |||||
| position: fixed; | |||||
| top: 0; | |||||
| left: 0; | |||||
| } | |||||
| .content { | |||||
| position: relative; | |||||
| width: 100vw; | |||||
| height: 100vh; | |||||
| background-color: green; | |||||
| overflow: hidden; | |||||
| .active { | |||||
| position: absolute; | |||||
| top: -10px; | |||||
| left: -10px; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| border: 10px solid rgba(0, 0, 0, 0.5); | |||||
| } | |||||
| .material { | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| width: 150px; | |||||
| height: 140px; | |||||
| background-color: red; | |||||
| img { | |||||
| width: 30px; | |||||
| height: 30px; | |||||
| // background-color: red; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||