引言：
在现今的社交媒体时代，图片已经成为了人们常用的交流方式之一。为了更好地保护自己的图片作品，许多人经常在图片上添加水印。本文将介绍如何使用php和uniapp实现图片的水印功能，让您的图片更加个性化和安全。
一、PHP实现图片水印功能
- 创建一个PHP文件，命名为watermark.php。
<?php
// 定义水印文字
$text = 'Watermark';
// 定义水印字体
$font = 'msyh.ttc'; // 这里使用了微软雅黑字体，请确保服务器上有该字体文件
立即学习“PHP免费学习笔记（深入）”；
// 定义水印字体大小
$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);
?>
- 将要添加水印的图片命名为source.jpg，并与watermark.php文件放在同一目录下。
- 在浏览器中访问watermark.php，即可看到已经添加水印的图片。
二、UniApp实现图片水印功能
- 在UniApp的pages目录下创建一个新的页面，命名为Watermark。
- 在Watermark页面的vue文件中，添加以下内容：
<template>
<view>
<image src="../../static/source.jpg" mode="aspectFit" @tap="addWatermark" />
</view>
</template>
<script>
export default {
methods: {
addWatermark() {
uni.getImageInfo({
src: '../../static/source.jpg',
success: (res) => {
uni.previewImage({
urls: ['../../static/source.jpg'],
success: () => {
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, () => {
uni.canvasToTempFilePath({
canvasId: 'watermarkCanvas',
success: (result) => {
uni.hideLoading();
uni.saveImageToPhotosAlbum({
filePath: result.tempFilePath,
success: () => {
uni.showToast({
title: '水印已添加',
icon: 'success'
});
},
fail: () => {
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
},
fail: () => {
uni.hideLoading();
uni.showToast({
title: '添加水印失败',
icon: 'none'
});
}
});
});
}
});
},
fail: () => {
uni.showToast({
title: '获取图片信息失败',
icon: 'none'
});
}
});
}}
};
</script>
- 将要添加水印的图片命名为source.jpg，并放在static目录下。
- 在manifest.json文件中的pages字段中添加"pages/Watermark/index"。
- 在浏览器中访问UniApp项目，点击图片即可预览，并长按图片进行添加水印操作。水印会自动添加在图片中央，并保存在手机相册中。
结论：
通过使用PHP和UniApp，我们可以方便地实现图片的水印功能。PHP可以在服务器端处理图片，而UniApp则可以在移动端实现添加水印的操作。这样，我们既可以在电脑上通过PHP进行水印处理，也可以在手机上通过UniApp进行水印操作，方便实用。希望本文能对您有所帮助。
