前端JavaScript实现图片水印生成的具体指南

// 就像准备画板和颜料
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("机密", 100, 100);

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

<!-- 就像准备一个相框 -->
<input type="file" id="uploader" accept="image/*">
<div id="photoFrame"></div>

// 纹身师傅上岗啦！（给图片添加水印的函数）
async function tattooImage(file) {
  // 1. 读取顾客照片
  // 调用 loadImage 函数，将上传的文件转换为 Image 对象
  const img = await loadImage(file);
  
  // 2. 准备画布（根据照片尺寸定制）
  // 创建一个 Canvas 元素，用于绘制图片和水印
  const canvas = document.createElement("canvas");
  // 设置 Canvas 的宽高与图片一致
  canvas.width = img.width;
  canvas.height = img.height;

  // 3. 绘制原图（先铺好底图）
  // 获取 Canvas 的绘图上下文
  const ctx = canvas.getContext("2d");
  // 将图片绘制到 Canvas 上
  ctx.drawImage(img, 0, 0);

  // 4. 设计纹身图案（设置水印样式）
  // 设置水印的字体为微软雅黑，大小为 30px，加粗
  ctx.font = "bold 30px 微软雅黑";
  // 设置水印的颜色为黑色，透明度为 0.3
  ctx.fillStyle = "rgba(0,0,0,0.3)";
  
  // 5. 斜着纹更防伪（旋转20度）
  // 将 Canvas 绘图上下文旋转 -20 度（逆时针旋转）
  // 注意：旋转是以 Canvas 的原点为中心的，因此水印会倾斜
  ctx.rotate(-20 * Math.PI / 180);
  
  // 6. 全图纹上暗花（平铺水印）
  // 使用双层循环，在图片上平铺水印文本
  for (let x = 0; x < canvas.width; x += 200) { // 水印水平方向的间距为 200 像素
    for (let y = 0; y < canvas.height; y += 100) { // 水印垂直方向的间距为 100 像素
      // 在指定位置绘制水印文本“严禁盗用”
      ctx.fillText("严禁盗用", x, y);
    }
  }

  // 7. 包装成品（将带有水印的 Canvas 导出为图片）
  // 将 Canvas 的内容导出为 Base64 格式的图片数据
  return canvas.toDataURL("image/jpeg");
}
function loadImage(file) {
  return new Promise((resolve, reject) => {
    // 1.创建一个 FileReader 对象
    const reader = new FileReader(); 
    reader.onload = (e) => {
      // 2.在读取文件的时候，创建一个 Image 对象
      const img = new Image(); 
      img.onload = () => {
        // 当图片加载完成时，返回 Image 对象
        resolve(img); 
      };
      img.onerror = (err) => {
        // 如果图片加载失败，抛出错误
        reject(err); 
      };
      // 将 Base64 数据赋值给 Image 的 src 属性
      img.src = e.target.result; 
    };
    // 如果文件读取失败，抛出错误
    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 数据赋值给 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 数据赋值给 Image 的 src 属性

// 当顾客上传照片时
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);

// 异步函数：给通过 URL 加载的图片添加水印
async function addWatermarkToLocalImage(imageUrl) {
  return new Promise((resolve) => {
    const img = new Image(); // 创建一个 Image 对象，用于加载图片
    
    // 关键设置：声明需要跨域访问
    // 如果图片来自其他域名，需要设置 crossOrigin 属性为 "Anonymous" 或 "Use-Credentials"
    img.crossOrigin = "Anonymous";
    
    // 避免缓存问题：在图片 URL 后添加时间戳
    img.src = imageUrl + '?t=' + Date.now();
    
    // 图片加载成功后的回调
    img.onload = function() {
      // 创建一个 Canvas 元素，用于绘制图片和水印
      const canvas = document.createElement("canvas");
      // 设置 Canvas 的宽高与图片一致
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext("2d"); // 获取 Canvas 的绘图上下文
      
      // 绘制原图：将加载的图片绘制到 Canvas 上
      ctx.drawImage(img, 0, 0);
      
      // 添加水印（与之前相同）
      // 设置水印的字体、颜色和透明度
      ctx.font = "bold 30px Microsoft YaHei";
      ctx.fillStyle = "rgba(0,0,0,0.3)";
      
      // 旋转水印（-20度），使水印倾斜
      ctx.rotate(-20 * Math.PI / 180);
      
      // ...（其他水印代码，例如平铺水印等）
      
      // 将带有水印的 Canvas 导出为 Base64 格式的图片数据
      resolve(canvas.toDataURL("image/jpeg"));
    };
    
    // 图片加载失败的回调
    img.onerror = () => {
      console.error("本地图片加载失败，请检查：");
      console.log("1. 图片URL是否正确");
      console.log("2. 服务器是否允许跨域（CORS）");
      resolve(null); // 返回 null 表示失败
    };
  });
}

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

img.crossOrigin = "Anonymous"; // 必须！

// 在Node.js服务器添加这段代码
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

img.src = url + '?t=' + Date.now(); // 加时间戳避免缓存

async function addWatermarkToWebImage(imageUrl) {
  try {
    // 方案1：直接尝试（需要图片服务器允许跨域）
    const result = await tryDirectWatermark(imageUrl);
    if (result) return result;
    
    // 方案2：通过后端代理（当直接访问失败时）
    return await fetchProxyWatermark(imageUrl);
  } catch (error) {
    console.error("水印生成失败:", error);
    return null;
  }
}

// 尝试直接加水印
async function tryDirectWatermark(url) {
  return new Promise((resolve) => {
    const img = new Image();
    img.crossOrigin = "Anonymous";
    img.src = url;
    
    img.onload = function() {
      // ...（与本地服务器相同的加水印逻辑）
      resolve(watermarkedImage);
    };
    
    img.onerror = () => resolve(null); // 失败返回null
  });
}

// 通过后端代理获取
async function fetchProxyWatermark(url) {
  const response = await fetch(`/api/watermark-proxy?url=${encodeURIComponent(url)}`);
  const blob = await response.blob();
  return URL.createObjectURL(blob);
}

// 代理接口实现
app.get('/api/watermark-proxy', async (req, res) => {
  const { url } = req.query;
  try {
    const response = await axios.get(url, { responseType: 'arraybuffer' });
    res.type(response.headers['content-type']);
    res.send(response.data);
  } catch (error) {
    res.status(500).send("图片获取失败");
  }
});

<!DOCTYPE html>
<html>
<body>
  <h2>本地服务器图片</h2>
  <button onclick="processLocalImage()">处理本地图片</button>
  
  <h2>网络图片</h2>
  <input type="text" id="webImageUrl" placeholder="输入图片URL">
  <button onclick="processWebImage()">处理网络图片</button>
  
  <div id="result" style="margin-top:20px;"></div>

  <script>
    async function processLocalImage() {
      const result = await addWatermarkToLocalImage(
        "http://localhost:3000/photo.jpg"
      );
      if (result) {
        document.getElementById("result").innerHTML = `
          <img src="${result}" style="max-width:500px;">
        `;
      }
    }
    
    async function processWebImage() {
      const url = document.getElementById("webImageUrl").value;
      const result = await addWatermarkToWebImage(url);
      if (result) {
        document.getElementById("result").innerHTML = `
          <img src="${result}" style="max-width:500px;">
          <p>右键图片另存为即可下载</p>
        `;
      } else {
        alert("处理失败，请检查URL或控制台报错");
      }
    }
  </script>
</body>
</html>

// 水印间距
for(let x=0; x<width; x+=150) { ... }
for(let y=0; y<height; y+=80) { ... }

// 旋转角度
ctx.rotate(-15 * Math.PI / 180); // 改成15度