如何使用PHP和UniApp实现图片的水印功能-php教程-PHP中文网

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

WBOY

发布： 2023-07-05 09:49:12

原创

1841人浏览过

如何使用php和uniapp实现图片的水印功能

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

一、PHP实现图片水印功能

创建一个PHP文件，命名为watermark.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文件中，添加以下内容：

<image src="../../static/source.jpg" mode="aspectFit" @tap="addWatermark" />

登录后复制

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

登录后复制

}
};