不同大小的图片如何保证canvas水印位置相同字体大小一样

如果你想在不同大小的图片上添加相同大小的水印，并且保证水印的位置相同，你需要根据图片的大小来计算水印的位置和字体大小。

具体来说，你可以按照以下步骤进行：

1. 首先，确定水印的大小和位置，以及你想要的字体大小。假设你想要的水印大小是 100x50 像素，位于图片的右下角，字体大小是 16 像素。

2. 然后，获取图片的宽度和高度。假设你的图片大小是 800x600 像素。

3. 计算出水印的位置。因为你想要的水印位于图片的右下角，所以你可以将水印的 x 坐标设置为图片宽度减去水印宽度，将水印的 y 坐标设置为图片高度减去水印高度。在本例中，水印的位置应该是 (700, 550)。

4. 计算出字体大小。由于你希望每个水印都具有相同的字体大小，因此你需要将字体大小与图片的宽度进行比例缩放。你可以根据水印的宽度和图片的宽度来计算出缩放比例，并将字体大小乘以该比例。在本例中，缩放比例为 0.2（即水印宽度为图片宽度的 0.2 倍），因此字体大小应该是 3.2 像素。

5. 最后，你可以在 canvas 上绘制水印。使用 `drawImage()` 方法将图片绘制到 canvas 上，然后使用 `fillText()` 方法将水印绘制到 canvas 上。在本例中，你需要将水印的位置和字体大小传递给 `fillText()` 方法。

下面是一个示例代码，演示如何在不同大小的图片上添加相同大小的水印，并保持水印位置和字体大小相同：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 假设水印大小是 100x50 像素，位于图片右下角，字体大小是 16 像素
const watermarkWidth = 100;
const watermarkHeight = 50;
const watermarkFontSize = 16;

// 假设图片大小为 800x600 像素
const imageWidth = 800;
const imageHeight = 600;

// 计算水印的位置和字体大小
const watermarkX = imageWidth - watermarkWidth;
const watermarkY = imageHeight - watermarkHeight;
const scale = watermarkWidth / imageWidth;
const watermarkFont = `${watermarkFontSize * scale}px Arial`;

// 绘制图片和水印
const img = new Image();
img.onload = function() {
  // 绘制图片
  ctx.drawImage(img, 0, 0);

  // 绘制水印
  ctx.font = watermarkFont;
  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
  ctx.fillText('watermark', watermarkX, watermarkY);
};
img.src = 'image.jpg';

在上面的代码中，我们首先定义了水印的大小、位置和字体大小，以及图片的大小。然后，我们计算出水印的位置和字体大小，并将其传递给 `fillText()` 方法。最后，我们在 canvas 上绘制了图片和水印。