如何使用PHP和UniApp实现图片的水印功能

如何使用PHP和UniApp实现图片的水印功能

引言：
在现今的社交媒体时代，图片已经成为了人们常用的交流方式之一。为了更好地保护自己的图片作品，许多人经常在图片上添加水印。本文将介绍如何使用PHP和UniApp实现图片的水印功能，让您的图片更加个性化和安全。

一、PHP实现图片水印功能

1. 创建一个PHP文件，命名为watermark.php。

// 定义水印文字
$text = 'Watermark';

// 定义水印字体
$font = 'msyh.ttc'; // 这里使用了微软雅黑字体，请确保服务器上有该字体文件

// 定义水印字体大小
$fontsize = 40;

// 定义水印文字颜色
$color = imagecolorallocatealpha($image, 255, 255, 255, 50);

// 打开源图片文件
$sourceImage = imagecreatefromjpeg('source.jpg');

// 获取源图片的宽高
$sourceWidth = imagesx($sourceImage);
$sourceHeight = imagesy($sourceImage);

// 创建一个新图片，用于添加水印
$newImage = imagecreatetruecolor($sourceWidth, $sourceHeight);

// 将源图片复制到新图片中
imagecopy($newImage, $sourceImage, 0, 0, 0, 0, $sourceWidth, $sourceHeight);

// 在新图片上添加水印文字
imagettftext($newImage, $fontsize, 0, $sourceWidth * 0.5 - $fontsize 0.5, $sourceHeight * 0.5 + $fontsize 0.5, $color, $font, $text);

// 输出带有水印的图片
header('Content-Type: image/jpeg');
imagejpeg($newImage);

// 释放图片资源
imagedestroy($sourceImage);
imagedestroy($newImage);
?>

2. 将要添加水印的图片命名为source.jpg，并与watermark.php文件放在同一目录下。
3. 在浏览器中访问watermark.php，即可看到已经添加水印的图片。

二、UniApp实现图片水印功能

1. 在UniApp的pages目录下创建一个新的页面，命名为Watermark。
2. 在Watermark页面的vue文件中，添加以下内容：

<script><br>export default {<br> methods: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>addWatermark() { uni.getImageInfo({ src: '../../static/source.jpg', success: (res) =&gt; { uni.previewImage({ urls: ['../../static/source.jpg'], success: () =&gt; { uni.showLoading({ title: '正在添加水印...', mask: true }); const ctx = uni.createCanvasContext('watermarkCanvas'); ctx.drawImage(res.path, 0, 0, res.width, res.height); ctx.setFontSize(40); ctx.setFillStyle('rgba(255, 255, 255, 0.5)'); ctx.setTextAlign('center'); ctx.setTextBaseline('middle'); ctx.fillText('Watermark', res.width * 0.5, res.height * 0.5); ctx.draw(false, () =&gt; { uni.canvasToTempFilePath({ canvasId: 'watermarkCanvas', success: (result) =&gt; { uni.hideLoading(); uni.saveImageToPhotosAlbum({ filePath: result.tempFilePath, success: () =&gt; { uni.showToast({ title: '水印已添加', icon: 'success' }); }, fail: () =&gt; { uni.showToast({ title: '保存失败', icon: 'none' }); } }); }, fail: () =&gt; { uni.hideLoading(); uni.showToast({ title: '添加水印失败', icon: 'none' }); } }); }); } }); }, fail: () =&gt; { uni.showToast({ title: '获取图片信息失败', icon: 'none' }); } }); }</pre><div class="contentsignin">登录后复制</div></div><p>}<br>};<br></script>

3. 将要添加水印的图片命名为source.jpg，并放在static目录下。
4. 在manifest.json文件中的pages字段中添加"pages/Watermark/index"。
5. 在浏览器中访问UniApp项目，点击图片即可预览，并长按图片进行添加水印操作。水印会自动添加在图片中央，并保存在手机相册中。

结论：
通过使用PHP和UniApp，我们可以方便地实现图片的水印功能。PHP可以在服务器端处理图片，而UniApp则可以在移动端实现添加水印的操作。这样，我们既可以在电脑上通过PHP进行水印处理，也可以在手机上通过UniApp进行水印操作，方便实用。希望本文能对您有所帮助。

以上是如何使用PHP和UniApp实现图片的水印功能的详细内容。更多信息请关注PHP中文网其他相关文章！