192 lines
5.1 KiB
Vue
192 lines
5.1 KiB
Vue
<script>
|
||
import { BASE_URL, IMAGE_BASE_URL } from '@/utils/config';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
imagePath: '',
|
||
processedImage: '',
|
||
isCanvasReady: false,
|
||
ctx: null // 存储canvas上下文
|
||
}
|
||
},
|
||
mounted() {
|
||
// 组件挂载后初始化canvas上下文
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.ctx = uni.createCanvasContext('myCanvas', this);
|
||
console.log('Canvas上下文初始化完成');
|
||
}, 100);
|
||
});
|
||
},
|
||
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;
|
||
|
||
// 确保ctx存在
|
||
if (!this.ctx) {
|
||
this.ctx = uni.createCanvasContext('myCanvas', this);
|
||
}
|
||
|
||
// 清空Canvas
|
||
this.ctx.clearRect(0, 0, 300, 300);
|
||
|
||
// 绘制图片
|
||
uni.getImageInfo({
|
||
src: that.imagePath,
|
||
success: function(res) {
|
||
that.ctx.drawImage(res.path, 0, 0, 300, 300);
|
||
that.ctx.draw(true, () => {
|
||
console.log('图片绘制完成');
|
||
that.isCanvasReady = true;
|
||
|
||
// 重要：添加额外延迟确保Canvas完全渲染
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '图片已加载，可以处理',
|
||
icon: 'success'
|
||
});
|
||
}, 200);
|
||
});
|
||
},
|
||
fail: function(err) {
|
||
console.error('获取图片信息失败', err);
|
||
}
|
||
});
|
||
},
|
||
|
||
// 处理图片（移除白色背景）
|
||
processImage() {
|
||
if (!this.isCanvasReady) {
|
||
uni.showToast({
|
||
title: '请先上传图片',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
const that = this;
|
||
uni.showLoading({
|
||
title: '处理中...',
|
||
mask: true
|
||
});
|
||
|
||
// 增加延迟时间确保Canvas完全渲染
|
||
setTimeout(() => {
|
||
// 获取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();
|
||
},
|
||
fail: function(err) {
|
||
uni.hideLoading();
|
||
console.error('像素数据放回失败', err);
|
||
}
|
||
});
|
||
},
|
||
fail: function(err) {
|
||
uni.hideLoading();
|
||
console.error('获取像素数据失败', err);
|
||
// 调试信息：检查canvas状态
|
||
that.checkCanvasStatus();
|
||
}
|
||
});
|
||
}, 500); // 增加延迟到500ms
|
||
},
|
||
|
||
// 检查Canvas状态的方法
|
||
checkCanvasStatus() {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select('#myCanvas')
|
||
.boundingClientRect()
|
||
.exec((res) => {
|
||
if (res[0]) {
|
||
console.log('Canvas元素信息:', res[0]);
|
||
} else {
|
||
console.log('Canvas元素未找到');
|
||
}
|
||
});
|
||
},
|
||
|
||
// 将Canvas转换为图片
|
||
canvasToImage() {
|
||
const that = this;
|
||
|
||
// 增加延迟时间
|
||
setTimeout(() => {
|
||
uni.canvasToTempFilePath({
|
||
canvasId: 'myCanvas',
|
||
success: function(res) {
|
||
that.processedImage = res.tempFilePath;
|
||
uni.hideLoading();
|
||
|
||
console.log("处理后的图片路径:", res.tempFilePath);
|
||
|
||
// 触发自定义事件，让父组件处理上传
|
||
that.$emit('image-processed', res.tempFilePath);
|
||
},
|
||
fail: function(err) {
|
||
uni.hideLoading();
|
||
console.error('Canvas转换失败', err);
|
||
}
|
||
});
|
||
}, 300);
|
||
},
|
||
|
||
// 可选：添加重新初始化方法
|
||
reinitializeCanvas() {
|
||
this.ctx = null;
|
||
this.isCanvasReady = false;
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.ctx = uni.createCanvasContext('myCanvas', this);
|
||
console.log('Canvas重新初始化完成');
|
||
}, 100);
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script> |