TP5.1 사진에 워터마크 기능 추가
- XuPing.Yang원래의
- 2021-04-30 20:01:212146검색
최근 회사의 웹사이트 관리 시스템 페이지를 개발하는 동안 일부 고객은 업로드된 사진에 자동으로 워터마크를 추가하여 다른 사람이 더 중요한 사진을 재사용하거나 도용하여 회사에 불필요한 문제와 손실을 일으키는 것을 방지할 수 있도록 요청했습니다. 타인이 사진을 침해하는 것을 방지할 수도 있습니다. 반복적인 연구와 Layui와의 결합을 통해 사진 업로드와 워터마크 기능 추가가 1차로 완료되었습니다. 여기에 몇 가지 중요한 코드가 나열되어 있습니다. 모든 사람에게 유용할 수 있기를 바랍니다.
우선, 첫 번째 단계는 이미지 처리 플러그인을 설치하는 것입니다. 이 플러그인을 설치하려면 먼저 컴퓨터에 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(['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>[이미지 업로드]
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();
}
}[워터마크 라이브러리]
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'=>'保存失败'];
}
}실제 작업을 바탕으로 작성한 일부입니다. 코드, 도움이 되길 바랍니다.
감사합니다!
관련 추천: 최신 10개 thinkphp 비디오 튜토리얼
위 내용은 TP5.1 사진에 워터마크 기능 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.