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

近段时间,在为公司开发网站管理系统页面,有些客户要求,上传的照片要能够自动添加水印功能,以防止其他人复用或者盗用一些比较重要的图片,给公司带来不必要的麻烦和损失,并且也能够防止别人进行图片的侵权。通过反复研究,结合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】

nbsp;html&gt;      <meta>    <title>{$site.company}会员管理系统</title>    <link>    <link>    <script></script>    <div>        <div>            <label>照片上传</label>            <div>                <input>            </div>            <div>                <button>上传照片</button>            </div>        </div>        <div>            <div>                <div>                    <div>                        @@##@@                        <p></p>                    </div>                </div>            </div>        </div>        <div>            <div>                <input>            </div>        </div>    </div>    <script> 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;">上传失败 <a class="layui-btn layui-btn-xs demo-reload">重试&#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>

【图片上传】

public function uploadFile(){    //获取上传文件信息    $file = request()-&gt;file('file');    //以在上传目录下面生成以当前日期为子目录,存放上传文件    $path = date("Ymd");    //以当前时间和100~1000之间的随机数作为文件名称    $filename = time().rand(100,1000);    //将上传的文件移动到指定目录下    $info = $file-&gt;move('uploadfile/'.$path.'/',$filename);     //验证图片并移动到指定目录    if ($info){        //返回上传成功提示信息        //获取图片的名字        $imgName = $info-&gt;getFilename();        $size = $info-&gt;getInfo('size');        //获取图片的路径        $photo1 ='/uploadfile/'.$path.'/'.$info-&gt;getSaveName();        return json(['code'=&gt;1,'path'=&gt;$photo1]);    }else{        //返回上传失败提示信息        return $file-&gt;getError();    } }

【水印类库】

namespace appapiclasses;   use thinkImage;  class imgWaterClass {    /**图片文字水印     * object(thinkImage)#47 (3) {    ["im":protected] =&gt; resource(96) of type (gd)    ["gif":protected] =&gt; NULL    ["info":protected] =&gt; array(4) {    ["width"] =&gt; int(750)    ["height"] =&gt; int(450)    ["type"] =&gt; string(4) "jpeg"    ["mime"] =&gt; string(10) "image/jpeg"    }    }     *     */    public function imageWaterText($path,$text){        $img = ".".$path;        $image = Image::open($img);        $image-&gt;text($text,'./static/style/font/simsun.ttc',20,'#ffffff',9 ,"-10px")-&gt;save($img);        return $img;    }    public function imageWaterImg($path,$logo){        $img = ".".$path;        $logo = ".".$logo;        $image = Image::open($img);        $image-&gt;water($logo,Image::WATER_SOUTHEAST)-&gt;save($img);        return $img;    } }

【后台程序处理】

public function save(){    $data = Request::param();    $water = new imgWaterClass();    $img_url = $data['face'];//需要添加水印的图片    $path = "/uploads/logo.png";//水印图片    $img = $water-&gt;imageWaterImg($img_url,$path);//添加水印图片    $img_text = $water-&gt;imageWaterText($img_url,'我是水印');//添加水印文字    if($img){        return ['code'=&gt;1,'msg'=&gt;'保存成功'];    }else{        return ['code'=&gt;0,'msg'=&gt;'保存失败'];    } }

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

谢谢!

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享