使用JavaScript给图片添加文本水印的前端实现方法

在前端开发中，如果我们想要在图片上添加一些自定义的标识或者版权信息，可以使用JavaScript来实现给图片添加文本水印。本文将介绍如何使用Canvas API和JavaScript来实现这一功能，并提供了一个示例代码，帮助读者理解实现的原理和步骤。

1.示例代码及解释： 以下是一个示例代码，展示了如何使用JavaScript给图片添加文本水印 

function addTextWatermark(imagePath, text, outputId) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  
  var image = new Image();
  image.crossOrigin = "Anonymous";
  image.src = imagePath;
  
  image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    
    ctx.drawImage(image, 0, 0);
    
    ctx.font = "20px Arial";
    ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
    ctx.textAlign = "center";
    
    var textWidth = ctx.measureText(text).width;
    var textHeight = 20;
    var xCount = Math.ceil(canvas.width / textWidth) + 1;
    var yCount = Math.ceil(canvas.height / textHeight) + 1;
    
    for (var i = 0; i < xCount; i++) {
      for (var j = 0; j < yCount; j++) {
        ctx.fillText(text, i * textWidth, j * textHeight);
      }
    }
    
    var outputImage = document.getElementById(outputId);
    outputImage.src = canvas.toDataURL();
    
    console.log("水印添加完成！");
  };
}

绘制文本水印时，采用了平铺的方式。具体实现方法如下：

        首先，计算文本水印的宽度和高度。然后，根据图片宽度和文本水印宽度来计算需要平铺几次才能达到占满整个图片的效果。

        接着，使用两个循环嵌套来绘制文本水印。在内循环中，文本水印沿着x轴平铺，而在外循环中，文本水印沿着y轴平铺。这样，就能够让文本水印平铺占满整个图片的区域。

        最后，将Canvas生成的图片数据URL赋值给输出图片元素的src属性，从而显示添加水印后的图片。

 2.使用示例代码： 你可以使用以下代码来调用addTextWatermark函数，实现给图片添加文本水印的效果：

addTextWatermark('original_image.jpg', 'Watermark Text', 'output_image');

在上述示例中，'original_image.jpg'是原始图片的路径，'Watermark Text'是要添加的文本水印内容，'output_image'是一个<img>元素的id，用于显示添加水印后的图片。

效果图：

总结： 

        通过Canvas API和JavaScript，我们可以轻松实现给图片添加文本水印的功能。上述示例代码提供了一种简单的实现方式，读者可以根据自己的需要进行扩展和优化。希望这个示例对您有所帮助，能够在前端开发中应用到实际项目中，为图片添加自定义的标识和版权信息。如果您有任何问题或建议，欢迎留言讨论。

参考资料：

• MDN Web 文档：Canvas API