From 108854a197c8be26cf4c8d50c532263bc85c5ad5 Mon Sep 17 00:00:00 2001 From: Rain_ <904416525@qq.com> Date: Mon, 8 Sep 2025 09:22:24 +0800 Subject: [PATCH] =?UTF-8?q?flx=EF=BC=9Apng=E5=9B=BE=E7=89=87=E8=BD=AC?= =?UTF-8?q?=E6=8D=A2=E4=B8=BAwebp=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main.js | 2 +- pages/projectEnd/safeSame/addIssue.vue | 13 ++- .../canversCom/canversCom.vue | 90 ++++++++++++++----- 3 files changed, 81 insertions(+), 24 deletions(-) diff --git a/main.js b/main.js index 77f67632..7ca3c356 100644 --- a/main.js +++ b/main.js @@ -103,7 +103,7 @@ if (process.env.NODE_ENV === 'development') { // Vue.prototype.url_config = 'http://8.136.222.164:8808/'//中科安信 // Vue.prototype.url_config = 'http://101.43.164.214:11111/'// 百色三标段 // Vue.prototype.url_config = 'http://jxj.zhgdyun.com:9500/'// 测试环境h5 - Vue.prototype.url_config = 'http://jxj.zhgdyun.com:21000/' // 潮州项目h5 + // Vue.prototype.url_config = 'http://jxj.zhgdyun.com:21000/' // 潮州项目h5 } else { // 生产环境 diff --git a/pages/projectEnd/safeSame/addIssue.vue b/pages/projectEnd/safeSame/addIssue.vue index cab1cbc6..f5ebaed1 100644 --- a/pages/projectEnd/safeSame/addIssue.vue +++ b/pages/projectEnd/safeSame/addIssue.vue @@ -414,6 +414,10 @@ import { dateformat } from "@/utils/tool.js" + import { + pathToBase64, + base64ToPath + } from '@/utils/imgPachToBase64/index.js' export default { components: { tkiTree, @@ -1520,7 +1524,14 @@ count: 5 - that.imgFileList.length, success(res) { const tempFilePaths = res.tempFilePaths; - that.canversList(tempFilePaths[0]); + // #ifdef H5 + that.uploadFileFn(tempFilePaths[0]); + // #endif + // #ifdef APP-PLUS + that.canversList(tempFilePaths[0]); + // #endif + + // uni.uploadFile({ // url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址 // filePath: tempFilePaths[0], diff --git a/pages/projectEnd/safeSame/hiddenTroubleComponents/canversCom/canversCom.vue b/pages/projectEnd/safeSame/hiddenTroubleComponents/canversCom/canversCom.vue index 51b61dc6..94aa654b 100644 --- a/pages/projectEnd/safeSame/hiddenTroubleComponents/canversCom/canversCom.vue +++ b/pages/projectEnd/safeSame/hiddenTroubleComponents/canversCom/canversCom.vue @@ -22,7 +22,7 @@ weatherInfo: '--', //天气 adressDetail: '--', //地址 url: '', - systemInfo: {}, + userInfo: {}, } }, props: ['imgList'], @@ -32,15 +32,10 @@ mounted() { console.log("啦啦啦啦啦", this.imgList) var that = this; - uni.getSystemInfo({ - success(res) { - that.systemInfo = res; - console.log(111222, res) - } - }) + this.userInfo = JSON.parse(uni.getStorageSync('userInfo')); this.date = this.dateFormat(new Date().toISOString()) this.loadWeather(); - + }, methods: { //获取天气温度等信息 @@ -115,30 +110,29 @@ }) let that = this; console.log('我开始画啦 ：' + JSON.stringify(that.imgList)) - console.log(that.systemInfo) const ctx = uni.createCanvasContext('myCanvas', that); //获取一个画布对象 ctx.drawImage(that.imgList.imgUrl, 0, 0, that.imgList.imgWidth, that.imgList .imgHeight); //画一个图片底图（路径，位置，大小） - if(that.imgList.imgWidth > that.imgList.imgHeight){ + if (that.imgList.imgWidth > that.imgList.imgHeight) { ctx.drawImage(require('@/static/CanvarsImg.png'), that.imgList.imgWidth * 0.52, that.imgList .imgHeight * 0.72, that.imgList.imgWidth * 0.5, that.imgList.imgHeight * 0.22); //画一个图片底图（路径，位置，大小） - ctx.setFontSize(25); // 文字字号 - } else if(that.imgList.imgHeight / that.imgList.imgWidth < 2) { + ctx.setFontSize(25); // 文字字号 + } else if (that.imgList.imgHeight / that.imgList.imgWidth < 2) { ctx.drawImage(require('@/static/CanvarsImg.png'), that.imgList.imgWidth * 0.52, that.imgList .imgHeight * 0.72, that.imgList.imgWidth * 0.5, that.imgList.imgHeight * 0.2); //画一个图片底图（路径，位置，大小） - ctx.setFontSize(25); // 文字字号 - } else if(that.imgList.imgHeight / that.imgList.imgWidth < 2.2) { + ctx.setFontSize(25); // 文字字号 + } else if (that.imgList.imgHeight / that.imgList.imgWidth < 2.2) { ctx.drawImage(require('@/static/CanvarsImg.png'), that.imgList.imgWidth * 0.52, that.imgList .imgHeight * 0.74, that.imgList.imgWidth * 0.5, that.imgList.imgHeight * 0.16); //画一个图片底图（路径，位置，大小） - ctx.setFontSize(25); // 文字字号 + ctx.setFontSize(25); // 文字字号 } else { ctx.drawImage(require('@/static/CanvarsImg.png'), that.imgList.imgWidth * 0.52, that.imgList .imgHeight * 0.74, that.imgList.imgWidth * 0.5, that.imgList.imgHeight * 0.16); //画一个图片底图（路径，位置，大小） - ctx.setFontSize(17); // 文字字号 + ctx.setFontSize(17); // 文字字号 } ctx.setFillStyle('#FFFFFF'); // 文字颜色 ctx.setFillStyle('#000000'); // 文字颜色 @@ -150,8 +144,10 @@ // ctx.fillText('地点：' + that.adressDetail, that.imgList.imgWidth * 0.56, that.imgList // .imgHeight * // 0.88); // 绘制文字 - const insertIntervalString = (originStr, disNum = 10, insertStr = "\n") => originStr.replace(new RegExp("(.{" + disNum + "})", "g"), "$1" + insertStr); - that.drawMultilineText(ctx, insertIntervalString('地点：' + that.locationInfo, 18), that.imgList.imgWidth * 0.56, that.imgList.imgHeight * + const insertIntervalString = (originStr, disNum = 10, insertStr = "\n") => originStr.replace(new RegExp( + "(.{" + disNum + "})", "g"), "$1" + insertStr); + that.drawMultilineText(ctx, insertIntervalString('地点：' + that.locationInfo, 18), that.imgList.imgWidth * + 0.56, that.imgList.imgHeight * 0.86, 40); // ctx.fillText('拍摄人：' + that.imgList.shooter, that.imgList.imgWidth * 0.56, that.imgList // .imgHeight * @@ -196,11 +192,61 @@ let that = this pathToBase64(url).then(data => { // console.log('转换后的base64格式的图片', data); //data为base64格式的图片 - that.$emit('imgUrl', { - imageBase64: data, - imgUrl: that.imgUrl, + // fetch( + // that.url_config + + // "xmgl/upload/convertBase642webp", { + // method: "post", + // headers: { + // Authorization: that.userInfo.token, + // "Content-Type": "application/json", // 设置请求头的内容类型为JSON + // }, + // body: { + // base64: data, + // }, + // } + // ) + // .then((response) => { + // // 处理响应 + // if (!response.ok) { + // throw new Error("导出失败"); + // } + // return response.blob(); + // }) + // .then((blob) => { + // console.log("导出成功", URL.createObjectURL(blob)); + // const url = URL.createObjectURL(blob); + // that.$emit('imgUrl', { + // imageBase64: data, + // // imgUrl: that.imgUrl, + // imgUrl: url, + // }) + // that.imgList.imgWidth = null + // }) + // .catch((error) => { + // // 处理错误 + // console.error(error); + // }); + that.sendRequest({ + url: 'xmgl/upload/convertBase642webp', + method: 'post', + data: { + base64: data, + }, + success: (res) => { + console.log(res); + if(res.code == 200) { + base64ToPath(`data:image/webp;base64,${res.result}`).then(url => { + console.log(222, url) + that.$emit('imgUrl', { + imageBase64: data, + // imgUrl: that.imgUrl, + imgUrl: url, + }) + that.imgList.imgWidth = null + }) + } + } }) - that.imgList.imgWidth = null }) }, dateFormat(time) {