cari

Rumah >rangka kerja php >ThinkPHP >TP5.1 为图片添加水印功能

TP5.1 为图片添加水印功能

XuPing.Yang
XuPing.Yangasal
2021-04-30 20:01:212180semak imbas

近段时间，在为公司开发网站管理系统页面，有些客户要求，上传的照片要能够自动添加水印功能，以防止其他人复用或者盗用一些比较重要的图片，给公司带来不必要的麻烦和损失，并且也能够防止别人进行图片的侵权。通过反复研究，结合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([&#39;form&#39;,&#39;layer&#39;,&#39;upload&#39;,&#39;element&#39;], function(){
           $ = layui.jquery;
var form = layui.form
,layer = layui.layer;
var upload = layui.upload;
var element = layui.element;
//常规使用 - 普通图片上传
var uploadInst = upload.render({
               elem: &#39;#face1&#39;
,url: &#39;{:url("uploadFile")}&#39;
,before: function(obj){
                   //预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
                       $(&#39;#face_show&#39;).attr(&#39;src&#39;, result); //图片链接（base64）
});

element.progress(&#39;demo&#39;, &#39;0%&#39;); //进度条复位
layer.msg(&#39;上传中&#39;, {icon: 16, time: 0});
}
               ,done: function(data){
                   //如果上传失败
if(data.code > 0){
                       layer.msg(&#39;上传成功&#39;);
document.getElementById(&#39;face&#39;).value = data.path;
$(&#39;#faceText&#39;).html(&#39;&#39;); //置空上传失败的状态
}else {
                       layer.msg(&#39;上传失败&#39;,{icon:2});
}

               }
               ,error: function(){
                   //演示失败状态，并实现重传
var demoText = $(&#39;#faceText&#39;);
demoText.html(&#39;<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>&#39;);
demoText.find(&#39;.demo-reload&#39;).on(&#39;click&#39;, function(){
                       uploadInst.upload();
});
}
               //进度条
,progress: function(n, index, e){
                   element.progress(&#39;demo&#39;, n + &#39;%&#39;); //可配合 layui 进度条元素使用
if(n == 100){
                       layer.msg(&#39;上传完毕&#39;, {icon: 1});
}
               }
           });
form.on(&#39;submit(add)&#39;, function(data){
               console.log(data);
//发异步，把数据提交给php
$.post(&#39;{:url(\&#39;save\&#39;)}&#39;,$(&#39;form&#39;).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(&#39;file&#39;);
   //以在上传目录下面生成以当前日期为子目录，存放上传文件
   $path = date("Ymd");
   //以当前时间和100~1000之间的随机数作为文件名称
   $filename = time().rand(100,1000);
   //将上传的文件移动到指定目录下
   $info = $file->move(&#39;uploadfile/&#39;.$path.&#39;/&#39;,$filename);

   //验证图片并移动到指定目录
   if ($info){
       //返回上传成功提示信息
       //获取图片的名字
       $imgName = $info->getFilename();
       $size = $info->getInfo(&#39;size&#39;);
       //获取图片的路径
       $photo1 =&#39;/uploadfile/&#39;.$path.&#39;/&#39;.$info->getSaveName();
       return json([&#39;code&#39;=>1,&#39;path&#39;=>$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,&#39;./static/style/font/simsun.ttc&#39;,20,&#39;#ffffff&#39;,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[&#39;face&#39;];//需要添加水印的图片
   $path = "/uploads/logo.png";//水印图片
   $img = $water->imageWaterImg($img_url,$path);//添加水印图片
   $img_text = $water->imageWaterText($img_url,&#39;我是水印&#39;);//添加水印文字
   if($img){
       return [&#39;code&#39;=>1,&#39;msg&#39;=>&#39;保存成功&#39;];
   }else{
       return [&#39;code&#39;=>0,&#39;msg&#39;=>&#39;保存失败&#39;];
   }
}

这是我根据我的实际操作写的一部分代码，希望对各位能够有所帮助。

谢谢！

相关推荐：最新的10个thinkphp视频教程

Atas ialah kandungan terperinci TP5.1 为图片添加水印功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：关于ThinkPHP的join关联查询不使用默认的表前缀Artikel seterusnya：thinkphp6重定向提示

Artikel berkaitan

Lihat lagi