// 就像準(zhǔn)備畫板和顏料
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

// 把照片鋪在畫板上
ctx.drawImage(img, 0, 0);

// 用半透明"墨水"寫字
ctx.fillStyle = "rgba(0,0,0,0.3)";
ctx.fillText("機(jī)密", 100, 100);

// 把畫好的作品拍成照片
canvas.toDataURL("image/jpeg");

<!-- 就像準(zhǔn)備一個(gè)相框 -->
<input type="file" id="uploader" accept="image/*">
<div id="photoFrame"></div>

// 紋身師傅上崗啦！（給圖片添加水印的函數(shù)）
async function tattooImage(file) {
  // 1. 讀取顧客照片
  // 調(diào)用 loadImage 函數(shù)，將上傳的文件轉(zhuǎn)換為 Image 對象
  const img = await loadImage(file);
  
  // 2. 準(zhǔn)備畫布（根據(jù)照片尺寸定制）
  // 創(chuàng)建一個(gè) Canvas 元素，用于繪制圖片和水印
  const canvas = document.createElement("canvas");
  // 設(shè)置 Canvas 的寬高與圖片一致
  canvas.width = img.width;
  canvas.height = img.height;

  // 3. 繪制原圖（先鋪好底圖）
  // 獲取 Canvas 的繪圖上下文
  const ctx = canvas.getContext("2d");
  // 將圖片繪制到 Canvas 上
  ctx.drawImage(img, 0, 0);

  // 4. 設(shè)計(jì)紋身圖案（設(shè)置水印樣式）
  // 設(shè)置水印的字體為微軟雅黑，大小為 30px，加粗
  ctx.font = "bold 30px 微軟雅黑";
  // 設(shè)置水印的顏色為黑色，透明度為 0.3
  ctx.fillStyle = "rgba(0,0,0,0.3)";
  
  // 5. 斜著紋更防偽（旋轉(zhuǎn)20度）
  // 將 Canvas 繪圖上下文旋轉(zhuǎn) -20 度（逆時(shí)針旋轉(zhuǎn)）
  // 注意：旋轉(zhuǎn)是以 Canvas 的原點(diǎn)為中心的，因此水印會(huì)傾斜
  ctx.rotate(-20 * Math.PI / 180);
  
  // 6. 全圖紋上暗花（平鋪水?。?
  // 使用雙層循環(huán)，在圖片上平鋪水印文本
  for (let x = 0; x < canvas.width; x += 200) { // 水印水平方向的間距為 200 像素
    for (let y = 0; y < canvas.height; y += 100) { // 水印垂直方向的間距為 100 像素
      // 在指定位置繪制水印文本“嚴(yán)禁盜用”
      ctx.fillText("嚴(yán)禁盜用", x, y);
    }
  }

  // 7. 包裝成品（將帶有水印的 Canvas 導(dǎo)出為圖片）
  // 將 Canvas 的內(nèi)容導(dǎo)出為 Base64 格式的圖片數(shù)據(jù)
  return canvas.toDataURL("image/jpeg");
}
function loadImage(file) {
  return new Promise((resolve, reject) => {
    // 1.創(chuàng)建一個(gè) FileReader 對象
    const reader = new FileReader(); 
    reader.onload = (e) => {
      // 2.在讀取文件的時(shí)候，創(chuàng)建一個(gè) Image 對象
      const img = new Image(); 
      img.onload = () => {
        // 當(dāng)圖片加載完成時(shí)，返回 Image 對象
        resolve(img); 
      };
      img.onerror = (err) => {
        // 如果圖片加載失敗，拋出錯(cuò)誤
        reject(err); 
      };
      // 將 Base64 數(shù)據(jù)賦值給 Image 的 src 屬性
      img.src = e.target.result; 
    };
    // 如果文件讀取失敗，拋出錯(cuò)誤
    reader.onerror = (err) => {
      reject(err); 
    };
    reader.readAsDataURL(file); // 以 Data URL 的形式讀取文件
  });
}

const reader = new FileReader();
reader.onload = (e) => {
  const img = new Image();
  img.onload = () => {
    resolve(img);
  };
  img.onerror = (err) => {
    reject(err);
  };
  img.src = e.target.result; // 將 Base64 數(shù)據(jù)賦值給 Image 的 src 屬性
};
reader.onerror = (err) => {
  reject(err);
};
reader.readAsDataURL(file); // 以 Data URL 的形式讀取文件

const img = new Image();
img.onload = () => {
  resolve(img);
};
img.onerror = (err) => {
  reject(err);
};
img.src = e.target.result; // 將 Base64 數(shù)據(jù)賦值給 Image 的 src 屬性

// 當(dāng)顧客上傳照片時(shí)
uploader.addEventListener("change", async (e) => {
  const file = e.target.files[0];
  if(!file) return;
  
  // 開始紋身！
  const protectedImage = await tattooImage(file);
  
  // 展示成品
  photoFrame.innerHTML = `<img src="${protectedImage}" style="max-width:100%">`;
});

ctx.fillText(`張三 ${new Date().toLocaleDateString()}`, x, y);

const logo = await loadImage("logo.png");
ctx.drawImage(logo, x, y, 50, 50);

// 異步函數(shù)：給通過 URL 加載的圖片添加水印
async function addWatermarkToLocalImage(imageUrl) {
  return new Promise((resolve) => {
    const img = new Image(); // 創(chuàng)建一個(gè) Image 對象，用于加載圖片
    
    // 關(guān)鍵設(shè)置：聲明需要跨域訪問
    // 如果圖片來自其他域名，需要設(shè)置 crossOrigin 屬性為 "Anonymous" 或 "Use-Credentials"
    img.crossOrigin = "Anonymous";
    
    // 避免緩存問題：在圖片 URL 后添加時(shí)間戳
    img.src = imageUrl + '?t=' + Date.now();
    
    // 圖片加載成功后的回調(diào)
    img.onload = function() {
      // 創(chuàng)建一個(gè) Canvas 元素，用于繪制圖片和水印
      const canvas = document.createElement("canvas");
      // 設(shè)置 Canvas 的寬高與圖片一致
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext("2d"); // 獲取 Canvas 的繪圖上下文
      
      // 繪制原圖：將加載的圖片繪制到 Canvas 上
      ctx.drawImage(img, 0, 0);
      
      // 添加水?。ㄅc之前相同）
      // 設(shè)置水印的字體、顏色和透明度
      ctx.font = "bold 30px Microsoft YaHei";
      ctx.fillStyle = "rgba(0,0,0,0.3)";
      
      // 旋轉(zhuǎn)水?。?20度），使水印傾斜
      ctx.rotate(-20 * Math.PI / 180);
      
      // ...（其他水印代碼，例如平鋪水印等）
      
      // 將帶有水印的 Canvas 導(dǎo)出為 Base64 格式的圖片數(shù)據(jù)
      resolve(canvas.toDataURL("image/jpeg"));
    };
    
    // 圖片加載失敗的回調(diào)
    img.onerror = () => {
      console.error("本地圖片加載失敗，請檢查：");
      console.log("1. 圖片URL是否正確");
      console.log("2. 服務(wù)器是否允許跨域（CORS）");
      resolve(null); // 返回 null 表示失敗
    };
  });
}

// 使用示例
const watermarked = await addWatermarkToLocalImage(
  "http://localhost:3000/uploads/photo.jpg" // 圖片的 URL
);