使用 PHP 和 JavaScript 来轻松添加水印

在网站开发中经常需要添加水印来保护知识产权或者简单的标记图片来源和版权，本文将介绍如何使用 PHP 和 JavaScript 来实现简单的图片水印。

准备工作

在开始编写代码前，我们需要简单了解一下 PHP 和 JavaScript。PHP 是一种服务器端脚本语言，常用于开发网站后台接口和管理系统；JavaScript 是一种客户端脚本语言，常用于网站前端页面和用户交互。

我们需要准备一张需要添加水印的图片并保存到本地，此处假设图片路径为 ./image/test.jpg。同时，我们需要安装 PHP 的 GD 库和 JavaScript 的 jQuery 库。GD 库是一个用于处理图像的 PHP 扩展库，通过它我们能够处理图片的大小、颜色、格式和添加水印等操作。jQuery 库是一个快速、简洁的 JavaScript 库，能够简化 JavaScript 编程。

PHP 实现

首先我们编写 PHP 代码来添加水印，以下是实现代码：

<?php
// 打开图片
$imagePath = './image/test.jpg';
$im = imagecreatefromjpeg($imagePath); 

// 设置水印字体和文字
$text = 'watermark';
$font = 6;
$degree = 0;

// 获取水印文字的宽高
$textWidth = imagefontwidth($font) * strlen($text);
$textHeight = imagefontheight($font);

// 计算水印文字的位置
$x = imagesx($im) - $textWidth - 10;
$y = imagesy($im) - $textHeight - 10;

// 设置水印文字的颜色和透明度
$textColor = imagecolorallocatealpha($im, 255, 255, 255, 30);

// 写入水印
imagettftext($im, $font, $degree, $x, $y, $textColor, './arial.ttf', $text);

// 输出图片
header('Content-Type: image/jpeg');
imagejpeg($im);

// 释放内存
imagedestroy($im);

以上代码中，我们首先通过 imagecreatefromjpeg() 函数打开图片，并设置水印的字体和文字。接着通过 imagefontwidth() 和 imagefontheight() 函数计算水印文字的宽高，以便于计算水印文字的位置。imagesx() 和 imagesy() 函数分别用来获取图片的宽高，配合 strlen() 函数计算水印文字位置。imagecolorallocatealpha() 函数用于设置水印文字的颜色和透明度。最后我们通过 imagettftext() 函数将水印写入图片，然后通过 header() 函数设置图片类型并输出，最后释放内存。

JavaScript 实现

在 PHP 中实现水印已经可以满足大部分情况了，但是如果想要动态实现水印或者对用户上传的图片添加水印，我们就需要使用 JavaScript 来实现。以下是 JavaScript 实现代码：

$(function() {
  // 加载图片
  var img = new Image();
  img.onload = function() {
    // 创建画布并设置画布大小
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    // 将图片画在画布上
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    // 设置水印文字
    var text = 'watermark';
    ctx.font = '20px Arial';
    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
    ctx.rotate(-Math.PI/4);
    ctx.fillText(text, canvas.width - 50, 50);

    // 输出图片
    var outputImg = new Image();
    outputImg.src = canvas.toDataURL('image/png');
    $('body').append(outputImg);
  };
  img.src = './image/test.jpg';
});

以上代码中，我们首先通过 onload 事件加载图片。接着创建一个画布，设置大小为图片大小。使用 drawImage() 函数将加载的图片画在画布上。设置水印文字，并通过 fillText() 函数将水印写在画布上，为了让水印更加美观我们将水印旋转了 45 度。最后我们将修改后的画布通过 toDataURL() 函数转换成 base64 编码的图片数据，通过 src 属性设置为 img 标签的路径，并追加到页面中。

结语

本文提供了 PHP 和 JavaScript 两种实现水印的方法，读者可根据需求选择哪种方法使用，同时也可根据需要进行进一步的自定义和优化。