diff --git a/src/api/badge.ts b/src/api/badge.ts index 9bc76a5..8b274e5 100644 --- a/src/api/badge.ts +++ b/src/api/badge.ts @@ -111,3 +111,19 @@ export const trialPhone = (data: any) => { data, }) } + +// 获取上传人脸检测url +export const getUploadUrl = (params: any) => { + return request('images/uploadCheckUrl', { + method: 'GET', + params, + }) +} + +// 人脸检测接口 +export const faceCheck = (params: any) => { + return request('images/faceCheck', { + method: 'GET', + params, + }) +} diff --git a/src/assets/badge/1.png b/src/assets/badge/1.png new file mode 100644 index 0000000..aa1bbfc Binary files /dev/null and b/src/assets/badge/1.png differ diff --git a/src/assets/badge/2.png b/src/assets/badge/2.png new file mode 100644 index 0000000..df7ec8a Binary files /dev/null and b/src/assets/badge/2.png differ diff --git a/src/assets/badge/3.png b/src/assets/badge/3.png new file mode 100644 index 0000000..adf2d0f Binary files /dev/null and b/src/assets/badge/3.png differ diff --git a/src/assets/badge/4.png b/src/assets/badge/4.png new file mode 100644 index 0000000..7506caa Binary files /dev/null and b/src/assets/badge/4.png differ diff --git a/src/views/badge/index.vue b/src/views/badge/index.vue index a3c93ef..6343b89 100644 --- a/src/views/badge/index.vue +++ b/src/views/badge/index.vue @@ -4,7 +4,7 @@ import H5Cropper from 'vue-cropper-h5' import "vue-cropper-h5/dist/style.css" import { showLoadingToast, showToast, closeToast, showFailToast, showSuccessToast } from 'vant'; import * as badgeApi from '@/api/badge' -import { onMounted, ref } from 'vue'; + import { localStorage } from '@/utils/local-storage' import CryptoJS from 'crypto-js' @@ -12,14 +12,17 @@ const show = ref(false) const imgShow = ref(false) const router = useRouter() const option = ref({ - autoCropWidth: 1000, - autoCropHeight: 1000, - ceilbutton: false + autoCropWidth: 1024, + autoCropHeight: 1024, + ceilbutton: false, + infoTrue: true, + enlarge: 6 }) const options = ref({ autoCropWidth: 1000, autoCropHeight: 1000, - ceilbutton: false + ceilbutton: false, + info: true }) const openApp = () => { @@ -38,7 +41,6 @@ const openApp = () => { options.value.ceilbutton = false } } - const imgurl = ref('') const imgBgUrl = ref('') const remaining = ref(0) @@ -58,10 +60,12 @@ const getSizeList = () => { const orderStat = ref({}) const prodId = ref(7) +const prop = ref('') const getOrderStat = () => { badgeApi.getOrderStat({}).then((res: any) => { orderStat.value = res prodId.value = res.prod_id + prop.value = res.prop getSundryList() }) } @@ -117,36 +121,132 @@ const trialPhone = async () => { }) } const picture = ref(null) + +let imgPromise = null; + +const imageWidth = ref(0); +const imageHeight = ref(0); function getbase64Data(data) { + console.log('getbase64Data', data) picture.value = data; -} -function getBlob(data) { - console.log('getBlob', data) - if (data.size > 1024 * 1024 * 10) { + + const img = new Image(); + img.src = data; + img.onload = () => { + imageWidth.value = img.naturalWidth; + imageHeight.value = img.naturalHeight; + if (imageWidth.value < 800 || imageHeight.value < 800) { + showToast('请上传尺寸大于800*800像素的照片') + return + } + } + const blob = base64ToBlob(data); + if (blob.size > 1024 * 1024 * 10) { showToast('照片大小不能超过10M') return } - imgurl.value = data; -} -function getFile(data) { - console.log('getFile', data) + imgurl.value = blob; + if (prodId.value == 7) { + getUploadUrl() + } } -const pictureBg = ref(null) -function getBgbase64Data(data) { - pictureBg.value = data; + +function base64ToBlob(base64) { + var arr = base64.split(','), + mime = arr[0].match(/:(.*?);/)[1], + bstr = atob(arr[1]), + n = bstr.length, + u8arr = new Uint8Array(n); + while (n--) { + u8arr[n] = bstr.charCodeAt(n); + } + return new Blob([u8arr], { + type: mime + }); } -function getBlobBg(data) { - console.log('getBlobBg', data) - if (data.size > 1024 * 1024 * 10) { - showToast('照片大小不能超过10M') - return + +function imgorigoinf(data) { + const img = new Image(); + const objectUrl = URL.createObjectURL(data); // 创建文件对象的URL + img.src = objectUrl; + img.onload = () => { + imageWidth.value = img.naturalWidth; + imageHeight.value = img.naturalHeight; + if (imageWidth.value < 800 || imageHeight.value < 800) { + showToast('请上传尺寸大于800*800像素的照片') + setTimeout(() => { + const btn = document.querySelector('.btn') + if (btn) { + btn.click() + } + }, 1500); + imgurl.value = null + picture.value = null + return + } + console.log('imageWidth', imageWidth.value, 'imageHeight', imageHeight.value) } - imgBgUrl.value = data; } -const getRandomNumber = () => { - return kindList.value.map(obj => obj.id)[Math.floor(Math.random() * kindList.value.length)]; + +const getUploadUrl = () => { + badgeApi.getUploadUrl({}).then((res: any) => { + if (res) { + sendFaceToOss(imgurl.value, res.upload_url, res.path) + } + }) +} + +const sendFaceToOss = async (src: string, url: string, path: string) => { + try { + const response = await fetch(url, { + method: 'PUT', + headers: { + 'Content-Type': 'image/jpeg' + }, + body: src + }) + if (!response.ok) { + throw new Error('Upload failed') + } + console.log('图片上传成功--------', response) + if (response.status == 200) { + badgeApi.faceCheck({ + path: path, + prop: prop.value, + prod_id: 7 + }).then((res: any) => { + console.log('faceCheck', res) + showSuccessToast({ + message: '人脸检测成功', + duration: 2000, + }) + }).catch((err) => { + console.log('faceCheck', err) + showFailToast({ + message: err.message || '人脸检测失败', + icon: 'none', + duration: 2000, + }) + imgurl.value = null + picture.value = null + }).finally(() => { + setTimeout(() => { + closeToast() + }, 2000); + }) + } + } catch (err) { + closeToast() + showFailToast({ + message: err.message || '上传失败', + icon: 'none', + duration: 2000, + }) + } } + + // 获取Pid const pid = ref('') const getPid = async () => { @@ -157,10 +257,11 @@ const getPid = async () => { duration: 0, }) const params = { - prod_id: prodId.value + prod_id: prodId.value, + extend_value: -1, } try { - const res = await badgeApi.getPid(params) + const res = await badgeApi.getPid(params) as any console.log('getPid', res) isLoading.value = false pid.value = res.pid @@ -217,7 +318,8 @@ const sendToOss = async (src: string, url: string) => { const params = { pid: pid.value, group: 1, - prod_id: prodId.value + prod_id: prodId.value, + extend_value: -1 } badgeApi.putModeling(params).then((res: any) => { console.log('putModeling', res) @@ -412,7 +514,7 @@ onMounted(() => {
- 人物立体徽章 + {{ prop == '3D真人肖像' ? '3D真人肖像' : '人物立体徽章' }}
宠物立体徽章 @@ -449,6 +551,31 @@ onMounted(() => {
+
+
+
+ + + 照片示例 + + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
@@ -472,10 +599,10 @@ onMounted(() => {
- +
-
温馨提示：请上传只有1-2人的照片
+
温馨提示：请上传只有{{ prop == '3D真人肖像' ? '1' : '1-3' }}人的照片
温馨提示：请上传只有1-3只宠物的照片
diff --git a/src/views/badge/record.vue b/src/views/badge/record.vue index b429152..dc1afad 100644 --- a/src/views/badge/record.vue +++ b/src/views/badge/record.vue @@ -18,11 +18,11 @@
-
- 设计中 +
+
{{ item.reason || '设计中' }}
-
- 设计失败 +
+
{{ item.reason || '设计失败' }}
@@ -208,6 +208,7 @@ onUnmounted(() => { border-radius: 50%; font-size: 16px; color: #999; + text-align: center; } .record-image-item-null {