This commit is contained in:
qiuyuan 2025-12-29 13:54:05 +08:00
parent 2736f63505
commit 98435311b2
4 changed files with 1052 additions and 1174 deletions

View File

@ -1,165 +0,0 @@
<template>
<view class="container">
<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
<button @tap="uploadImage">上传印章图片</button>
<button @tap="processImage" v-if="imagePath">处理图片</button>
<image :src="processedImage" v-if="processedImage" mode="widthFix"></image>
</view>
</template>
<script>
import { BASE_URL,IMAGE_BASE_URL } from '@/utils/config';
export default {
data() {
return {
imagePath: '',
processedImage: ''
}
},
methods: {
//
uploadImage() {
const that = this;
uni.chooseImage({
count: 1,
sourceType: ['album', 'camera'],
success: function (res) {
that.imagePath = res.tempFilePaths[0];
that.drawImageToCanvas();
}
});
},
// Canvas
drawImageToCanvas() {
const that = this;
const ctx = uni.createCanvasContext('myCanvas', this);
// Canvas
ctx.clearRect(0, 0, 300, 300);
//
uni.getImageInfo({
src: that.imagePath,
success: function (res) {
ctx.drawImage(res.path, 0, 0, 300, 300);
ctx.draw(false, () => {
console.log('图片绘制完成');
});
}
});
},
//
processImage() {
const that = this;
const ctx = uni.createCanvasContext('myCanvas', this);
// Canvas
uni.canvasGetImageData({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 300,
height: 300,
success: function(res) {
const data = res.data;
//
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
//
if (r > 200 && g > 200 && b > 200) {
data[i + 3] = 0; // Alpha0
}
}
// Canvas
uni.canvasPutImageData({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 300,
height: 300,
data: data,
success: function() {
// Canvas
that.canvasToImage();
}
});
}
});
},
// Canvas
canvasToImage() {
const that = this;
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function(res) {
that.processedImage = res.tempFilePath;
const fileList = [{
url: res.tempFilePath,
status: 'uploading'
}];
console.log("==fileList",fileList)
// 4.
that.uploadFile(fileList[0]);
//
console.log('处理后的图片路径:', res.tempFilePath);
},
fail: function(err) {
console.error('Canvas转换失败', err);
}
});
},
async uploadFile(file) {
try {
await new Promise((resolve, reject) => {
uni.uploadFile({
url: `${IMAGE_BASE_URL}/api/v1/upload`,
filePath: file.url,
name: 'file',
header: {
'Authorization': `Bearer ${uni.getStorageSync('token')}`,
'Content-Type': 'multipart/form-data'
},
success: (uploadRes) => {
try {
const data = JSON.parse(uploadRes.data);
if (data.success) {
resolve(data.data);
} else {
reject(data.message || '上传失败');
}
} catch (e) {
reject('解析响应失败');
}
},
fail: (err) => reject(err)
});
});
} catch (err) {
console.error('上传失败:', err);
const index = this.fileList.findIndex(f => f.url === file.url);
if (index !== -1) {
this.$set(this.fileList, index, {
...file,
status: 'failed',
error: err.message || err
});
}
uni.showToast({
title: `上传失败: ${err.message || err}`,
icon: 'none'
});
throw err;
}
},
}
}
</script>

View File

@ -18,7 +18,7 @@
<view v-if="warnMsg" style="line-height: 21px;font-size: 14px;border-radius: 5px; padding: 5px;background: #ffac31;color: #ffffff;">{{warnMsg}}</view> <view v-if="warnMsg" style="line-height: 21px;font-size: 14px;border-radius: 5px; padding: 5px;background: #ffac31;color: #ffffff;">{{warnMsg}}</view>
</view> </view>
</u-modal> </u-modal>
</view> </view>
</template> </template>
<script> <script>

View File

@ -90,7 +90,7 @@
</view> </view>
<view class="service-grid"> <view class="service-grid">
<view class="service-card card-1" @click="goDetail('neighborList')" hover-class="card-hover"> <!-- <view class="service-card card-1" @click="goDetail('neighborList')" hover-class="card-hover">
<view class="card-content"> <view class="card-content">
<text class="card-title">邻里互助</text> <text class="card-title">邻里互助</text>
<text class="card-desc">近邻互帮互助</text> <text class="card-desc">近邻互帮互助</text>
@ -107,7 +107,16 @@
<view class="card-bg"></view> <view class="card-bg"></view>
</view> </view>
<image class="card-icon" src="/static/imgs/index/weixiu.png" style="width: 80rpx;height: 80rpx;bottom: 32rpx;"></image> <image class="card-icon" src="/static/imgs/index/weixiu.png" style="width: 80rpx;height: 80rpx;bottom: 32rpx;"></image>
</view> </view> -->
<view class="service-card card-1" @click="goDetail('meetingList')" hover-class="card-hover">
<view class="card-content">
<text class="card-title">会客厅预约</text>
<text class="card-desc">社区服务功能</text>
<view class="card-bg"></view>
</view>
<image class="card-icon" src="/static/imgs/index/bangzhu.png"
style="width: 68rpx;height: 68rpx; bottom: 48rpx;"></image>
</view>
</view> </view>
</view> </view>
@ -160,6 +169,8 @@ export default {
goDetail(page) { goDetail(page) {
if(page==='neighbor'){ if(page==='neighbor'){
navigateTo({url: `/pages/${page}/index`}) navigateTo({url: `/pages/${page}/index`})
}else if( page == 'serviceTickets'){
uni.showToast({ title: '此功能暂未开放', icon: 'error' });
}else{ }else{
uni.navigateTo({ uni.navigateTo({
url: `/pages/${page}/index` url: `/pages/${page}/index`

File diff suppressed because it is too large Load Diff