// 在頁面中新增一個 canvas 元件
<canvas canvas-id="myCanvas" bindtap="handleTap"></canvas>
// 在頁面的 js 檔案中處理圖片
Page({
data: {
imgUrl: '', // 儲存使用者選擇的圖片路徑
startX: 0, // 使用者指定區域的起始座標X
startY: 0, // 使用者指定區域的起始座標Y
endX: 100, // 使用者指定區域的結束座標X
endY: 100, // 使用者指定區域的結束座標Y
replaceColor: '#ff0000', // 替換的顏色，預設為紅色
},
chooseImage() {
wx.chooseImage({
success: (res) => {
const imgUrl = res.tempFilePaths[0];
this.setData({ imgUrl });
this.removeWatermark(imgUrl);
},
});
},
handleStart(e) {
// 記錄使用者選擇區域的起始座標
this.setData({
startX: e.touches[0].x,
startY: e.touches[0].y,
});
},
handleMove(e) {
// 記錄使用者選擇區域的結束座標
this.setData({
endX: e.touches[0].x,
endY: e.touches[0].y,
});
},
handleTap(e) {
const { x, y } = e.detail;
this.getColorAtPoint(x, y);
},
getColorAtPoint(x, y) {
const ctx = wx.createCanvasContext('myCanvas');
const pixelData = ctx.getImageData(x, y, 1, 1).data;
const color = `rgba(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]}, ${pixelData[3] / 255})`;
console.log('Selected color:', color);
// 將選取的顏色作為替換顏色
this.setData({ replaceColor: color });
},
removeWatermark(imgUrl) {
const { startX, startY, endX, endY, replaceColor } = this.data;
const ctx = wx.createCanvasContext('myCanvas');
ctx.drawImage(imgUrl, 0, 0, 300, 300); // 繪製原始圖片
// 在 canvas 上繪製指定區域
ctx.setFillStyle(replaceColor); // 設定替換顏色
ctx.fillRect(startX, startY, endX - startX, endY - startY); // 繪製使用者指定的區域
ctx.draw(false, () => {
// 儲存處理後的圖片
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: (res) => {
const tempFilePath = res.tempFilePath;
console.log(tempFilePath); // 處理後的圖片路徑
},
});
});
},
});