Maison > Article > cadre php > TP5.1 Ajouter une fonction de filigrane aux images

TP5.1 Ajouter une fonction de filigrane aux images

XuPing.Yangoriginal: 2021-04-30 20:01:212127parcourir

Récemment, lors du développement des pages du système de gestion de site Web pour l'entreprise, certains clients ont demandé que les photos téléchargées puissent ajouter automatiquement des filigranes pour empêcher d'autres de réutiliser ou de voler des images plus importantes, ce qui causerait des problèmes inutiles à l'entreprise. problèmes et pertes, et peut également empêcher les autres de porter atteinte aux images. Grâce à des recherches répétées et combinées avec layui, le téléchargement des images et l'ajout de la fonction filigrane ont été initialement réalisés. Certains codes importants sont répertoriés ici, j'espère qu'ils seront utiles à tout le monde.

Tout d'abord, la première étape consiste à installer le plug-in de traitement d'image. Pour installer ce plug-in, vous devez d'abord installer le logiciel Composer sur votre ordinateur. Le manuel d'utilisation TP5.1 fournit l'installation. étapes de Composer :

Dans Sous Linux et Mac OS

L'installation spécifique n'est pas détaillée ici. Après avoir installé le logiciel Composer, vous devez installer le plug-in d'image. Ouvrez la fenêtre d'exécution (touche système + R), entrez cmd, appuyez sur Entrée et accédez au répertoire de votre projet. . Puis exécutez :

. composer require topthink/think-imageUne fois l'installation terminée, vous pouvez passer à l'étape suivante.

Ce qui suit fait partie de mon code pour votre référence seulement.

[HTML]

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

[Téléchargement d'images]

<!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>

[Bibliothèque de filigranes]

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();
   }
}

[Traitement du programme en arrière-plan]

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;
   }
}

Cela fait partie du code que j'ai écrit en fonction de mon opération réelle, j'espère qu'il pourra vous être utile.

Merci !

Recommandations associées :

Les 10 derniers didacticiels vidéo thinkphp

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À propos de la requête de jointure de ThinkPHP n'utilisant pas le préfixe de table par défautArticle suivant：À propos de la requête de jointure de ThinkPHP n'utilisant pas le préfixe de table par défaut

Articles Liés

Voir plus