Home > Article > PHP Framework > TP5.1 Add watermark function to pictures
TP5.1 Add watermark function to pictures
- XuPing.YangOriginal
- 2021-04-30 20:01:212127browse
Recently, when developing website management system pages for the company, some customers requested that the uploaded photos should be able to automatically add watermarks to prevent others from reusing or stealing some more important pictures, which would bring unnecessary trouble to the company. trouble and loss, and can also prevent others from infringing on pictures. Through repeated research and combined with layui, the upload of pictures and the addition of the watermark function were initially completed. Some important codes are listed here, I hope it will be useful to everyone.
First of all, the first step is to install the image processing plug-in. To install this plug-in, you must first install the Composer software on your own computer. The TP5.1 operation manual provides the installation steps of Composer:
In In Linux and Mac OS X, you can run the following command:
curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/local/bin/composer
In Windows, you need to download and run Composer-Setup.exe. The specific installation will not be detailed here. After installing the Composer software, you need to install the image plug-in. Open the run window (system key R), enter cmd, press Enter, navigate to your project directory, and then Run: composer require topthink/think-image.
After the installation is completed, you can proceed to the next step.
The following is part of my code, for your reference only.
【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(['form','layer','upload','element'], function(){
$ = layui.jquery;
var form = layui.form
,layer = layui.layer;
var upload = layui.upload;
var element = layui.element;
//常规使用 - 普通图片上传
var uploadInst = upload.render({
elem: '#face1'
,url: '{:url("uploadFile")}'
,before: function(obj){
//预读本地文件示例，不支持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(''); //置空上传失败的状态
}else {
layer.msg('上传失败',{icon:2});
}
}
,error: function(){
//演示失败状态，并实现重传
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);
//发异步，把数据提交给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>【Image upload】
public function uploadFile(){
//获取上传文件信息
$file = request()->file('file');
//以在上传目录下面生成以当前日期为子目录，存放上传文件
$path = date("Ymd");
//以当前时间和100~1000之间的随机数作为文件名称
$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();
}
}【Watermark library】
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;
}
}[Background program processing]
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'=>'保存失败'];
}
}This is part of the code I wrote based on my actual operation. I hope it can be helpful to everyone.
Thanks!
Related recommendations: The latest 10 thinkphp video tutorials
The above is the detailed content of TP5.1 Add watermark function to pictures. For more information, please follow other related articles on the PHP Chinese website!