Canvas实现图片与文本水印的完整指南

<!DOCTYPE html>
<html>
<head>
<title>Canvas API 示例</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
  您的浏览器不支持Canvas。
</canvas>
<script type="text/javascript">
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#ff0000";
  ctx.beginPath();
  ctx.arc(100, 100, 70, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
</script>
</body>
</html>

// 获取Canvas元素
const canvas = document.getElementById('myCanvas');
 
// 获取Canvas的2D渲染上下文
const ctx = canvas.getContext('2d');
 
// 设置Canvas尺寸
canvas.width = window.innerWidth; // 适应窗口宽度
canvas.height = window.innerHeight; // 适应窗口高度

// 设置文本水印参数
const text = "水印文本"; // 文本内容
const font = "20px Arial"; // 字体样式和大小
const color = "rgba(0, 0, 255, 0.5)"; // 颜色（带透明度）
const textX = 10; // 文本的X坐标
const textY = 30; // 文本的Y坐标
 
// 渲染文本水印
ctx.font = font; // 设置字体
ctx.fillStyle = color; // 设置填充颜色
ctx.fillText(text, textX, textY); // 绘制文本

// 设置不同的字体、大小和颜色
const fonts = ['Arial', 'Times New Roman', 'Consolas', 'Courier New'];
const sizes = ['16px', '20px', '24px', '28px'];
const colors = [
    'rgba(0, 0, 0, 0.5)',
    'rgba(255, 0, 0, 0.5)',
    'rgba(0, 255, 0, 0.5)',
    'rgba(0, 0, 255, 0.5)'
];
 
// 随机选择字体样式、大小和颜色
let randomFont = fonts[Math.floor(Math.random() * fonts.length)];
let randomSize = sizes[Math.floor(Math.random() * sizes.length)];
let randomColor = colors[Math.floor(Math.random() * colors.length)];
 
// 渲染文本水印
ctx.font = `${randomSize} ${randomFont}`; // 设置随机字体和大小
ctx.fillStyle = randomColor; // 设置随机颜色
ctx.fillText(text, textX, textY);

// 设置文本的对齐方式
ctx.textAlign = 'center'; // 水平居中对齐
ctx.textBaseline = 'middle'; // 垂直居中对齐
 
// 渲染文本水印
ctx.fillText(text, canvas.width / 2, canvas.height / 2); // 在Canvas中心位置绘制文本

// 设置文本换行
ctx.textAlign = 'start'; // 文本左对齐
ctx.textBaseline = 'top'; // 文本顶部对齐
ctx.direction = 'rtl'; // 文本方向从右到左
 
// 设置裁剪区域，防止文本溢出Canvas边界
ctx.canvas.width = 300; // 设置Canvas宽度
ctx.canvas.height = 200; // 设置Canvas高度
ctx.clip(); // 应用裁剪区域
 
// 渲染文本水印
const longText = "这是一段很长很长的文本，可能会导致换行，我们需要正确处理这种情况，确保文本能够在Canvas中正确显示。";
ctx.fillText(longText, 10, 10);

var img = new Image();
img.onload = function() {
  console.log('图片加载完成');
  // 绘制图片水印的代码可以在这里执行
};
img.onerror = function() {
  console.log('图片加载失败');
};
img.src = 'path/to/your/image.png'; // 异步加载图片

function preloadImages(imagesArray) {
  var loadedImages = [];
  var imagesToLoad = imagesArray.length;
 
  imagesArray.forEach(function(imageUrl) {
    var img = new Image();
    img.onload = function() {
      loadedImages.push(img);
      imagesToLoad--;
      if (imagesToLoad === 0) {
        // 所有图片加载完成
        console.log('所有图片加载完毕');
      }
    };
    img.onerror = function() {
      console.log('图片加载错误');
    };
    img.src = imageUrl;
  });
}

function drawImageWatermark(ctx, img, x, y, width, height) {
  // 保持图片纵横比
  var imgRatio = img.width / img.height;
  var canvasRatio = ctx.canvas.width / ctx.canvas.height;
 
  if (canvasRatio < imgRatio) {
    width = ctx.canvas.width; // 宽度设置为画布宽度
    height = width / imgRatio; // 高度按比例缩放
  } else {
    height = ctx.canvas.height; // 高度设置为画布高度
    width = height * imgRatio; // 宽度按比例缩放
  }
 
  // 绘制图片
  ctx.drawImage(img, x, y, width, height);
}

function applyWatermark(ctx, img) {
  // 设置透明度
  ctx.globalAlpha = 0.5;
  // 设置混合模式，这里用的是destination-atop，确保水印在内容之上但不是完全覆盖
  ctx.globalCompositeOperation = 'destination-atop';
 
  // 绘制图片水印
  ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
  // 清除设置，不影响后续绘制
  ctx.globalAlpha = 1;
  ctx.globalCompositeOperation = 'source-over';
}