1
This commit is contained in:
parent
98435311b2
commit
7854188d95
165
pages/ceshi/index.vue
Normal file
165
pages/ceshi/index.vue
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
<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; // 设置Alpha通道为0(完全透明)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将处理后的像素数据放回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>
|
||||||
@ -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>
|
||||||
|
|||||||
@ -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,16 +107,7 @@
|
|||||||
<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>
|
||||||
|
|
||||||
@ -169,8 +160,6 @@ 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`
|
||||||
|
|||||||
2044
pages/mine/index.vue
2044
pages/mine/index.vue
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user