javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > canvas图片文本加水印

canvas实现给图片与文本加水印

作者：irisMoon06

这篇文章主要为大家详细介绍了如何使用canvas实现给图片与文本加水印功能,文中的示例代码讲解详细,有需要的小伙伴可以参考一下

先弄出一个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环境并获取其上下文（context）。Canvas API提供了2D渲染上下文，我们可以通过它来绘制文本、图形等元素。以下是如何设置Canvas环境和获取上下文的步骤：

// 获取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中心位置绘制文本

在某些情况下，我们可能需要处理文本内容过长导致的换行和溢出问题。通过调整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);

由于图片资源通常较大，若在页面加载时同步加载所有图片，将导致页面渲染时间过长，用户体验差。因此，采用异步加载是解决这一问题的有效方法。使用 Image 对象的 onload 事件可以监控图片加载状态。

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

在复杂的Web应用中，合理管理图片资源的缓存策略是提高性能的关键。合理使用浏览器缓存可以减少服务器请求次数，加快页面加载速度。设置合理的HTTP缓存头（例如 Cache-Control ）是一个有效的方法。

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;
  });
}

在Canvas中绘制图片水印首先需要确定图片的坐标位置和尺寸。通常，我们希望水印覆盖整个画布，或者在特定位置显示。下面是一个设置图片水印坐标的示例代码：

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);
}

图片水印通常需要一定透明度以避免完全覆盖底下的内容。另外，不同的Canvas合成模式可以帮助我们创建独特的视觉效果。下面是如何设置图片水印透明度和使用合成模式的代码示例：

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';
}

以上就是canvas实现给图片与文本加水印的详细内容，更多关于canvas图片文本加水印的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文