Kindeditor编辑器添加图片上传水印功能(php代码)

KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
主要特点:

快速:体积小,加载速度快

开源:开放源代码,高水平,高品质

底层:内置自定义 DOM 类库,精确操作 DOM

扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能

风格:修改编辑器风格非常容易,只需修改一个 CSS 文件

兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera

转到正题,默认的编辑器上传图片时,是没有水印功能的,下面详细介绍:

第一步:修改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));
  }
  //生成水印后的图片
  @unlink($groundImage);
  switch($ground_info[2]){//取得背景图片的格式
    case 1:imagegif($ground_im,$groundImage);break;
    case 2:imagejpeg($ground_im,$groundImage,100);break;//注意这里的100,经测试,100是图片质量最佳的,但文件大小会增加很多,95的时候质量还不错,大小和原来的差不多。作者采用95的值。
    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);
  }
  /* 水印配置结束 */

经本人测试可以正常使用,另外一点请注意水印图片的路径,根据实际情况而定。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-08-02

php图片加水印原理(超简单的实例代码)

文字水印: 复制代码 代码如下: $w = 80; $h = 20; $im = imagecreatetruecolor($w,$h); $textcolor = imagecolorallocate($im, 123, 12, 255); $white = imagecolorallocate($im, 255, 255, 255); $grey = imagecolorallocate($im, 128, 128, 128); $black = imagecolorallocate($im

PHP图片处理之使用imagecopy函数添加图片水印实例

为图片添加水印也是图片处理中常见的功能.因为只要在页面中见到的图片都可以很轻松地拿到,你辛辛苦苦编辑的图片不想被别人不费吹灰之力拿走就用,所以为图片添加水印以确定版权,防止图片被盗用.制作水印可以使用文字(公司名称加网址),也可以使用图片(公司LOGO),图片水印效果更好一些,因为可以通过一些做图片软件进行美化.使用文字做水印,只需要在图片上画一些文字即可.如果制作图片水印,就需要先了解一下GD库中的imagecopy()函数,能复制图片的一部分.该函数的原型如下所示: 复制代码 代码如下: b

PHP 图片水印类代码

支持文字水印.图片水印 支持水印的位置随机或固定(九宫格) 水印透明度设置(图片水印和文字水印都支持) 文字水印的字体.颜色.大小设置 图片水印的背景透明 复制代码 代码如下: <?php /** * 加水印类,支持文字图片水印的透明度设置.水印图片背景透明. * 日期:2011-09-27 * 作者:www.jb51.net * 使用: * $obj = new WaterMask($imgFileName); //实例化对象 * $obj->$waterType = 1; //类型:0为文

php文字水印和php图片水印实现代码(二种加水印方法)

文字水印 文字水印就是在图片上加上文字,主要使用gd库的imagefttext方法,并且需要字体文件.效果图如下: 实现代码如下: 复制代码 代码如下: $dst_path = 'dst.jpg'; //创建图片的实例$dst = imagecreatefromstring(file_get_contents($dst_path)); //打上文字$font = './simsun.ttc';//字体$black = imagecolorallocate($dst, 0x00, 0x00, 0x

php图片加中文水印实现代码分享

例1 复制代码 代码如下: <?php Header("Content-type: image/png"); /*通知浏览器,要输出图像*/ $im = imagecreate(400 , 300); /*定义图像的大小*/ $gray = ImageColorAllocate($im , 235 , 235 , 235); $pink = ImageColorAllocate($im, 255 , 128 , 255); $fontfile = "simkai.ttf

php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码

复制代码 代码如下: <?php //上传文件类型列表 $uptypes=array( 'image/jpg', 'image/jpeg', 'image/png', 'image/pjpeg', 'image/gif', 'image/bmp', 'image/x-png' ); $max_file_size = 200000; //上传文件大小限制, 单位BYTE $path_im = "prod_img/"; //生成大图保存文件夹路径 $path_sim = "

php给图片添加文字水印方法汇总

1: 面向过程的编写方法 //指定图片路径 $src = '001.png'; //获取图片信息 $info = getimagesize($src); //获取图片扩展名 $type = image_type_to_extension($info[2],false); //动态的把图片导入内存中 $fun = "imagecreatefrom{$type}"; $image = $fun('001.png'); //指定字体颜色 $col = imagecolorallocateal

用来给图片加水印的PHP类

复制代码 代码如下: <?php     /*    * 功能:PHP图片水印 (水印支持图片或文字)    * 参数:    *     $groundImage   背景图片,即需要加水印的图片,暂只支持GIF,JPG,PNG格式:    *     $waterPos     水印位置,有10种状态,0为随机位置:    *                 1为顶端居左,2为顶端居中,3为顶端居右:    *                 4为中部居左,5为中部居中,6为中部居右:   

超级好用的一个php上传图片类(随机名,缩略图,加水印)

Upimages.class.php php上传类 复制代码 代码如下: <?php class UpImages { var $annexFolder = "upload";//附件存放点,默认为:annex var $smallFolder = "small";//缩略图存放路径,注:必须是放在 $annexFolder下的子目录,默认为:smallimg var $markFolder = "mark";//水印图片存放处 var $

php加水印的代码(支持半透明透明打水印,支持png透明背景)

复制代码 代码如下: //原始图像        $dst = "/upload/20120914/20120914040740-0.jpg"; //注意图片路径要正确        //得到原始图片信息        $dst_info = getimagesize($dst);         switch ($dst_info[2])        {         case 1:         $dst_im =imagecreatefromgif($dst);break;

Javascript 网页水印(非图片水印)实现代码

1 概述 1.1 定义 在一些B/S结构的应用系统中,有很多页面是需要有水印的.常见的就是公文系统.合同系统等.大家常常关注的是网站图片增加水印,而很少关注页面水印.刚去Google了一圈,关于页面水印的文章的数量为几乎为0. 本文中,流牛木马就与大家一起交流一下有关制作网页水印的心得. 本文讨论以下的情形: 新增水印的方法需要用Javascript完成,并要求能够方便地加入到原有的页面中,不能影响到已有的功能. 1.2 预期目标 就图片水印实现方案来说,我们预期至少包括以下几个目标: 1. 实

php图片添加文字水印实现代码

php类库给现有的图片加文字水印,代码不是很完善,欢迎大家多多指教!代码如下: <?php /*PHP图片加文字水印类库 QQ:3697578482 伤心的歌 该类库暂时只支持文字水印,位置为右下角,颜色随机 调用方法: 1.在需要加水印的文件顶部引入类库: include_once 'imageClass.php'; 2.声明新类: $tpl=new image_fu; 3.给图片水印提供参数: $tpl->img(图片路径,水印文字,字体路径,字体大小,字体角度); 比如:$tpl->

漂亮实用的页面loading(加载)封装代码

要做一个异步登录,打算给用户做一点提示,所以就网上找了点代码,自己修改新增了一些,做了一个html+css+js的功能封装,以备未来直接使用. html <!-- 缓冲提示条 --> <div class='buffer hidden' id='buffer' > <div class="spinner"> <span class='buffer_tip' id='buffer_tip' >正在登陆</span> <di

JS实现图片预加载之无序预加载功能代码

图片预加载之无序预加载的效果图如下所示,如果大家感觉不错,请参考实现代码. 具体代码如下所示: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>PreLoading</title> <style> *{margin:0; padding:0; border:none; outline:0

js实现网页的两个input标签内的数值加减(示例代码)

实例如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var oIput1=document.getElementById('put1'); var oIput2=document.getElementById('put2'); var

Android界面数据懒加载实现代码

大家在使用手机新闻客户端的时候就会有一个发现,大多数的新闻客户端都会把新闻分类,诸如头条.娱乐.体育.科技等等,如何实现这种界面的呢?这个实现起来其实很简单,就是在一个Fragment中实现多个ViewPage的切换,再在ViewPage的上面放一个TabLayout,关联起来就可以实现联动效果.如果大家感觉不太明了的话,以后我可以专门写一篇关于Fragment中放入多个ViewPage的博客,今天,我主要介绍的是怎样实现界面即Fragment的懒加载.那么,大家就会奇怪了既然是加载界面直接加载

vue单页应用加百度统计代码(亲测有效)

申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到一个问题,Vue.js项目是单页应用,每次用户浏览网站时,访问内页时页面是不会刷新的,也就意味着不会触发百度统计代码:所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量,却无法统计到内页的访问流量. 解决方法 在main.js文件中调用vue-router的afterEach方法,将统计代码加入

AnglarJs中的上拉加载实现代码

简介 上拉加载,是目前手机网站加载数据的一种常用方式,本文主要讲解AnglarJs集成,上拉加载功能.通常与下拉刷新配置使用,下拉刷新请查阅. 实现 页面 <div class="search-box"> <b class="dw" ></b> <input type="search" class="search-input" placeholder="请输入搜索关键词&qu