php编程之kindeditor上传图片加水印实现

  对于如何在图片上添加水印是许多技术人员遇到的一个难题,那大家都见过微信公众号及一些其他技术平台是可以实现这个功能的,但是对于源码是如何实现的,却没有头绪,那么今天就为大家介绍一下关于kindeditor上传图片加水印的方法,看完之后相信各位技术人员就知道了。
第一步:修改upload_json.php文件
在编辑器的/php/目录下可以找到这个文件,新增一个函数:
/*

  • 功能:PHP图片水印,水印支持图片或文字
  • 参数:
  • $groundImage 背景图片,即需要加水印的图片,暂只支持GIF,JPG,PNG格式;
  • $waterPos 水印位置,有10种状态,0为随机位置;
  • 1为顶端居左,2为顶端居中,3为顶端居右;
  • 4为中部居左,5为中部居中,6为中部居右;
  • 7为底端居左,8为底端居中,9为底端居右;
  • $waterImage 图片水印,即作为水印的图片,暂只支持GIF,JPG,PNG格式;
  • $alpha 水印透明度,取值1-100;
  • $waterText 文字水印,即把文字作为为水印,支持ASCII码,不支持中文;
  • $textFont 文字大小,值为1、2、3、4或5,默认为5;
  • $textColor 文字颜色,值为十六进制颜色值,默认为#FF0000(红色);
  • $waterImage 和 $waterText 最好不要同时使用,选其中之一即可,优先使用 $waterImage。
  • 当$waterImage有效时,参数$waterString、$stringFont、$stringColor均不生效。
  • 加水印后的图片的文件名和 $groundImage 一样。
    */
    function imageWaterMark($groundImage, $waterPos=0, $waterImage='', $alpha=80, $waterText='', $water_fontfile, $textFont=9, $textColor='#FF0000'){
    $isWaterImage = FALSE;
    $formatMsg = '不支持该图片格式!请使用GIF、JPG、PNG格式的图片。';
    $fontFile = $water_fontfile;
    //读取水印文件
    if(!empty($waterImage) && file_exists($waterImage)){
    $isWaterImage = TRUE;
    $water_info = getimagesize($waterImage);
    $water_w = $water_info[0];//取得水印图片的宽
    $water_h = $water_info[1];//取得水印图片的高
    switch($water_info[2]){//取得水印图片的格式
    case 1:$water_im = imagecreatefromgif($waterImage);break;
    case 2:$water_im = imagecreatefromjpeg($waterImage);break;
    case 3:$water_im = imagecreatefrompng($waterImage);break;
    default:die($formatMsg);
    }
    }
    //读取背景图片
    if(!empty($groundImage) && file_exists($groundImage)){
    $ground_info = getimagesize($groundImage);
    $ground_w = $ground_info[0];//取得背景图片的宽
    $ground_h = $ground_info[1];//取得背景图片的高
    switch($ground_info[2]){//取得背景图片的格式
    case 1:$ground_im = imagecreatefromgif($groundImage);break;
    case 2:$ground_im = imagecreatefromjpeg($groundImage);break;
    case 3:$ground_im = imagecreatefrompng($groundImage);break;
    default:die($formatMsg);
    }
    }else{
    alert("水印图片不存在!");
    }
    //水印位置
    if($isWaterImage){//图片水印
    $w = $water_w;
    $h = $water_h;
    $label = "图片的";
    }else{//文字水印
    $temp = imagettfbbox($textFont, 0, $fontFile, $waterText);//取得使用 TrueType 字体的文本的范围
    $w = $temp[2] - $temp[6];
    $h = $temp[3] - $temp[7];
    unset($temp);
    $label = "文字区域";
    }
    if(($ground_w<$w) || ($ground_h<$h)){
    echo "需要加水印的图片的长度或宽度比水印".$label."还小,无法生成水印!";
    return;
    }
    switch($waterPos){
    case 0://随机
    $posX = rand(0,($ground_w - $w));
    $posY = rand(0,($ground_h - $h));
    break;
    case 1://1为顶端居左
    $posX = 0;
    $posY = 0;
    break;
    case 2://2为顶端居中
    $posX = ($ground_w - $w) / 2;
    $posY = 0;
    break;
    case 3://3为顶端居右
    $posX = $ground_w - $w;
    $posY = 0;
    break;
    case 4://4为中部居左
    $posX = 0;
    $posY = ($ground_h - $h) / 2;
    break;
    case 5://5为中部居中
    $posX = ($ground_w - $w) / 2;
    $posY = ($ground_h - $h) / 2;
    break;
    case 6://6为中部居右
    $posX = $ground_w - $w;
    $posY = ($ground_h - $h) / 2;
    break;
    case 7://7为底端居左
    $posX = 0;
    $posY = $ground_h - $h;
    break;
    case 8://8为底端居中
    $posX = ($ground_w - $w) / 2;
    $posY = $ground_h - $h;
    break;
    case 9://9为底端居右
    $posX = $ground_w - $w;
    $posY = $ground_h - $h;
    if(!$isWaterImage){
    $posY = $ground_h - $h-20;
    }
    break;
    default://随机
    $posX = rand(0,($ground_w - $w));
    $posY = rand(0,($ground_h - $h));
    break;
    }
    //设定图像的混色模式
    imagealphablending($ground_im, true);
    if($isWaterImage){//图片水印
    //imagecopy($ground_im, $water_im, $posX, $posY, 0, 0, $water_w,$water_h);//拷贝水印到目标文件
    //生成混合图像
    imagecopymerge($ground_im, $water_im, $posX, $posY, 0, 0, $water_w, $water_h, $alpha);
    } else {//文字水印
    if( !empty($textColor) && (strlen($textColor)==7)){
    $R = hexdec(substr($textColor,1,2));
    $G = hexdec(substr($textColor,3,2));
    $B = hexdec(substr($textColor,5));
    } else {
    die("水印文字颜色格式不正确!");
    }
    imagestring($ground_im, $textFont, $posX, $posY, $waterText, imagecolorallocate($ground_im, $R, $G, $B));br/>}
    //生成水印后的图片
    @unlink($groundImage);
    switch($ground_info[2]){//取得背景图片的格式
    case 1:imagegif($ground_im,$groundImage);break;
    case 2:imagejpeg($ground_im,$groundImage);break;
    case 3:imagepng($ground_im,$groundImage);break;
    default:die($errorMsg);
    }
    //释放内存
    if(isset($water_info)) unset($water_info);
    if(isset($water_im)) imagedestroy($water_im);
    unset($ground_info);
    imagedestroy($ground_im);
    }

第二步:找到$json = new Services_JSON();注意有两个地方,不是在alert函数里的那个,添加如下代码:
/ 水印配置开始 /
$water_mark = 1;//1为加水印, 其它为不加
$water_pos = 9;//水印位置,10种状态【0为随机,1为顶端居左,2为顶端居中,3为顶端居右;4为中部居左,5为中部居中,6为中部居右;7为底端居左,8为底端居中,9为底端居】
$water_img = $_SERVER['DOCUMENT_ROOT'].'/upfiles/water.gif';//水印图片,默认填写空,请将图片上传至网站根目录的upfiles下,例: water.gif
$water_alpha = 50;//水印透明度
$water_text = '';//水印字符串,默认填写空;
//$water_fontfile = $_SERVER['DOCUMENT_ROOT'] .'/upfiles/fonts/arial.ttf';//文字水印使用的字体;
if($water_mark == 1){
imageWaterMark($file_path, $water_pos, $water_img, $water_alpha, $water_text, $water_fontfile);
}
/ 水印配置结束 /

  以上就是代码的实现了,那么这种方法主要适用于php编程中,其他语言大家可以融会贯通一下,如果还存在不理解的地方,可以在下方留言讨论。

  本文由专业的app开发燚轩科技整理发布,如需转载请注明原文作者及出处!

转载于:https://blog.51cto.com/13686158/2110773

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
KindEditor是一款基于JavaScript的富文本编辑器,它可以方便地集成到网站中,并支持图片功能。在Spring Boot中实现KindEditor图片可以按照以下步骤进行: 1. 在Spring Boot中添以下依赖: ```xml <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency> ``` 2. 创建一个Controller用于处理图片请求,代码如下: ```java @RestController @RequestMapping("/upload") public class FileUploadController { @PostMapping("/image") public String uploadImage(HttpServletRequest request) throws Exception { MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; MultipartFile file = multipartRequest.getFile("imgFile"); String filename = file.getOriginalFilename(); String suffix = filename.substring(filename.lastIndexOf(".") + 1); String newFilename = UUID.randomUUID().toString() + "." + suffix; String savePath = "D:/upload/images/" + newFilename; // 上文件保存路径,根据实际情况修改 File destFile = new File(savePath); if (!destFile.getParentFile().exists()) { destFile.getParentFile().mkdirs(); } file.transferTo(destFile); String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/upload/images/" + newFilename; // 图片访问URL,根据实际情况修改 return "{\"error\":0,\"url\":\"" + url + "\"}"; } } ``` 3. 在HTML页面中集成KindEditor,并设置图片的请求地址,代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>KindEditor图片示例</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/kindeditor-all.min.css" /> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/kindeditor-all.min.js"></script> </head> <body> <textarea id="editor"></textarea> <script> KindEditor.ready(function(K) { K.create('#editor', { uploadJson: '/upload/image', allowFileManager: false }); }); </script> </body> </html> ``` 4. 启动Spring Boot应用,访问HTML页面即可进行图片。上图片会保存在指定的路径中,并返回图片的访问URL给KindEditor进行显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值