Kindeditor エディターに画像アップロードのウォーターマーク実装メソッドを追加

この記事では主に Kindeditor エディターと画像アップロードのウォーターマーク機能を詳しく紹介します。興味のある方は参考にしていただければ幸いです。

KindEditor は、オープンソースのオンライン HTML エディターです。開発者は、KindEditor を使用して、従来の複数行のテキスト入力ボックス (テキストエリア) をビジュアルリッチテキスト入力ボックスに置き換えることができます。 Java、.NET、PHP、ASP、その他のプログラムとシームレスに統合でき、CMS、ショッピング モール、フォーラム、ブログ、Wiki、電子メールなどのインターネット アプリケーションでの使用により適しています。
主な特徴:

高速: 小さいサイズ、速い読み込み速度

オープンソース: オープンソースコード、高レベル、高品質

最下層: 組み込みのカスタム DOM クラスライブラリ、DOM の正確な操作

拡張機能: プラグ-inベースのデザイン、すべての機能はプラグインであり、必要に応じて追加または削除できます

スタイル: CSSファイルを変更するだけで、エディターのスタイルを変更するのは非常に簡単です

互換性: ほとんどの主流ブラウザをサポートします。 IE、Firefox、Safari、Chrome、Opera

デフォルトのエディターで画像をアップロードする場合、透かし機能はありません。以下に詳細を示します:

ステップ 1: 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);
}

ステップ 2: $json = new Services_JSON(); の場所が 2 つあることに注意してください。アラート関数のものではなく、次のコードを追加します:

 /* 水印配置开始 */
  $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);
  }
  /* 水印配置结束 */

私のテストの後、それは正常に使用できるようになりました。もう 1 つの点は、実際の透かし画像のパスに注意してください。状況。

関連する推奨事項:

PHP は透かしを追加してサムネイルを生成できる処理ツールを実装します

PHP は画像の色領域の位置に基づいて透かしを追加します

Baidu エディターは画像透かし機能を追加します

以上がKindeditor エディターに画像アップロードのウォーターマーク実装メソッドを追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。