近段時間，在為公司開發網站管理系統頁面，有些客戶要求，上傳的照片要能夠自動添加浮水印功能，以防止其他人復用或盜用一些比較重要的圖片，給公司帶來不必要的麻煩和損失，也能夠防止別人進行圖片的侵權。透過反覆研究，結合layui，初步完成了圖片的上傳以及浮水印功能的添加。在這裡列出部分重要程式碼，希望對大家有用。
首先，第一步需要安裝圖片處理插件，而安裝此外掛程式首先要在自己的電腦安裝Composer軟體，TP5.1操作手冊提供了Composer的安裝步驟：
在Linux 和 Mac OS X 中可以執行以下指令：
curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer
登入後複製
在Windows 中，你需要下載並執行 Composer-Setup.exe。 具體的安裝在這裡就不詳說了，安裝完成Composer軟體之後，就需要安裝圖片插件了，打開運行視窗（系統鍵R），輸入cmd,回車後，定位到自己的專案目錄，然後運行：composer require topthink/think-image。
安裝完成後就可以進行下一步的工作了。
以下是我的部分程式碼，僅供大家參考。
【HTML】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{$site.company}会员管理系统</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="/css/main.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div>
<div>
<label>照片上传</label>
<div>
<input type="text" name="face" id="face" placeholder="请上传照片">
</div>
<div style="width: 80px!important;">
<button type="button" id="face1">上传照片</button>
</div>
</div>
<div>
<div>
<div>
<div>
<img src="/images/thumb.png" id="face_show" width="100px">
<p id="faceText"></p>
</div>
</div>
</div>
</div>
<div>
<div>
<input type="button" lay-submit="" lay-filter="add" value="提交">
</div>
</div>
</div>
<script type="text/javascript">
layui.use(['form','layer','upload','element'], function(){
$ = layui.jquery;
var form = layui.form
,layer = layui.layer;
var upload = layui.upload;
var element = layui.element;
//常规使用 - 普通图片上传
var uploadInst = upload.render({
elem: '#face1'
,url: '{:url("uploadFile")}'
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#face_show').attr('src', result); //图片链接（base64）
});
element.progress('demo', '0%'); //进度条复位
layer.msg('上传中', {icon: 16, time: 0});
}
,done: function(data){
//如果上传失败
if(data.code > 0){
layer.msg('上传成功');
document.getElementById('face').value = data.path;
$('#faceText').html(''); //置空上传失败的状态
}else {
layer.msg('上传失败',{icon:2});
}
}
,error: function(){
//演示失败状态，并实现重传
var demoText = $('#faceText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
//进度条
,progress: function(n, index, e){
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
if(n == 100){
layer.msg('上传完毕', {icon: 1});
}
}
});
form.on('submit(add)', function(data){
console.log(data);
//发异步，把数据提交给php
$.post('{:url(\'save\')}',$('form').serialize(),function(data){
if(data.code == 1){
layer.msg(data.msg);
setTimeout(function(){parent.window.location.reload();},1000);
}else{
layer.alert(data.msg, {icon: 6});
}
})
return false;
});
});
</script>
</body>
</html>登入後複製
【圖片上傳】
public function uploadFile(){
//获取上传文件信息
$file = request()->file('file');
//以在上传目录下面生成以当前日期为子目录，存放上传文件
$path = date("Ymd");
//以当前时间和100~1000之间的随机数作为文件名称
$filename = time().rand(100,1000);
//将上传的文件移动到指定目录下
$info = $file->move('uploadfile/'.$path.'/',$filename);
//验证图片并移动到指定目录
if ($info){
//返回上传成功提示信息
//获取图片的名字
$imgName = $info->getFilename();
$size = $info->getInfo('size');
//获取图片的路径
$photo1 ='/uploadfile/'.$path.'/'.$info->getSaveName();
return json(['code'=>1,'path'=>$photo1]);
}else{
//返回上传失败提示信息
return $file->getError();
}
}登入後複製
【水印類別庫】
namespace app\api\classes;
use think\Image;
class imgWaterClass
{
/**图片文字水印
* object(think\Image)#47 (3) {
["im":protected] => resource(96) of type (gd)
["gif":protected] => NULL
["info":protected] => array(4) {
["width"] => int(750)
["height"] => int(450)
["type"] => string(4) "jpeg"
["mime"] => string(10) "image/jpeg"
}
}
*
*/
public function imageWaterText($path,$text){
$img = ".".$path;
$image = Image::open($img);
$image->text($text,'./static/style/font/simsun.ttc',20,'#ffffff',9 ,"-10px")->save($img);
return $img;
}
public function imageWaterImg($path,$logo){
$img = ".".$path;
$logo = ".".$logo;
$image = Image::open($img);
$image->water($logo,Image::WATER_SOUTHEAST)->save($img);
return $img;
}
}登入後複製
【後台程式處理】
public function save(){
$data = Request::param();
$water = new imgWaterClass();
$img_url = $data['face'];//需要添加水印的图片
$path = "/uploads/logo.png";//水印图片
$img = $water->imageWaterImg($img_url,$path);//添加水印图片
$img_text = $water->imageWaterText($img_url,'我是水印');//添加水印文字
if($img){
return ['code'=>1,'msg'=>'保存成功'];
}else{
return ['code'=>0,'msg'=>'保存失败'];
}
}登入後複製
這是我根據我的實際操作寫的一部分程式碼，希望對各位能夠有所幫助。
謝謝！
相關推薦：最新的10個thinkphp影片教學
#
以上是TP5.1 為圖片添加浮水印功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
