Kindeditor編輯器添加圖片上傳浮水印實現方法

本文主要為大家詳細介紹了Kindeditor編輯器加圖片上傳浮水印功能，具有一定的參考價值，感興趣的小夥伴們可以參考一下，希望能協助到大家。

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);  }  /* 浮水印配置結束 */

經本人測試可以正常使用，另外一點請注意浮水印圖片的路徑，根據實際情況而定。