検索

ホームページ >PHPフレームワーク >ThinkPHP >TP5.1 画像にウォーターマーク機能を追加

TP5.1 画像にウォーターマーク機能を追加

XuPing.Yang
XuPing.Yangオリジナル
2021-04-30 20:01:212181ブラウズ

最近、会社の Web サイト管理システム ページを開発しているときに、一部の顧客から、他の人がより重要な写真を再利用したり盗んだりすることを防ぐために、アップロードされた写真に自動的に透かしを追加できるようにしてほしいとの要望がありました。これにより会社に無用なトラブルがもたらされることになります。トラブルや損失を防ぐことができ、他人による写真の侵害も防ぐことができます。研究を重ね、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」と入力して Enter キーを押し、プロジェクト ディレクトリに移動し、次に、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 ビデオ チュートリアル

以上がTP5.1 画像にウォーターマーク機能を追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：デフォルトのテーブルプレフィックスを使用しない ThinkPHP の結合クエリについて次の記事：デフォルトのテーブルプレフィックスを使用しない ThinkPHP の結合クエリについて

関連記事

続きを見る