使用TP5.1 怎么為圖片添加水印

發(fā)布時間：2021-05-06 16:30:38 來源：億速云閱讀：311 作者：Leah 欄目：編程語言

這篇文章將為大家詳細講解有關(guān)使用TP5.1 怎么為圖片添加水印，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

在 Linux 和 Mac OS X 中可以運行如下命令：

curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer

在 Windows 中，你需要下載并運行 Composer-Setup.exe。具體的安裝在這里就不詳說了，安裝完成Composer軟件之后，就需要安裝圖片插件了，打開運行窗口（系統(tǒng)鍵+R），輸入cmd,回車后，定位到自己的項目目錄，然后運行：composer require topthink/think-image。

安裝完成后就可以進行下一步的工作了。

下面是我的部分代碼，僅供大家參考。

【HTML】

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>{$site.company}會員管理系統(tǒng)</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;
//常規(guī)使用 - 普通圖片上傳
var uploadInst = upload.render({
               elem: '#face1'
,url: '{:url("uploadFile")}'
,before: function(obj){
                   //預(yù)讀本地文件示例，不支持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(''); //置空上傳失敗的狀態(tài)
}else {
                       layer.msg('上傳失敗',{icon:2});
}

               }
               ,error: function(){
                   //演示失敗狀態(tài)，并實現(xiàn)重傳
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);
//發(fā)異步，把數(shù)據(jù)提交給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之間的隨機數(shù)作為文件名稱
   $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'=>'保存失敗'];
   }
}

關(guān)于使用TP5.1 怎么為圖片添加水印就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

使用TP5.1 怎么為圖片添加水印

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽