admin/zhgdyunapp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

flx：png图片转换为webp格式

Browse Source
This commit is contained in:
Rain_ 2025-09-08 09:22:24 +08:00
parent 7becabc202
commit 108854a197
3 changed files with 81 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
main.js
View File

@ -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 {
// 生产环境

13
pages/projectEnd/safeSame/addIssue.vue
View File

@ -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],

90
pages/projectEnd/safeSame/hiddenTroubleComponents/canversCom/canversCom.vue
View File

@ -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) {