Kindeditor Editor Add image upload Watermark implementation method

Source: Internet
Author: User
This article is mainly for everyone in detail introduced the Kindeditor editor plus image upload watermark function, with a certain reference value, interested in small partners can refer to, hope to help everyone.

Kindeditor is an open source online HTML editor that allows developers to replace traditional multi-line text input boxes (textarea) with visual rich text input boxes with Kindeditor. Can be seamlessly integrated with Java,. NET, PHP, ASP and other programs, more suitable for use in CMS, Mall, forum, blog, Wiki, e-mail and other Internet applications.
Main Features:

Fast: Small size, fast loading speed

OpenSource: Open source, high quality

Bottom: Built-in custom DOM class library for precise DOM manipulation

Extension: Plug-in-based design, all functions are plug-ins, can be increased or decreased according to demand function

Style: Modifying the editor style is very easy, just modify a CSS file

Compatible: supports most major browsers such as IE, Firefox, Safari, Chrome, Opera

Go to the point, the default editor when uploading pictures, there is no watermark function, the following detailed description:

First Step: Modify the upload_json.php file

This file can be found in the/php/directory of the editor and a new function is added:


/* Function: PHP image watermark, watermark support picture or text * parameter: * $groundImage background image, that is, the image needs to add watermark, temporarily only support gif,jpg,png format; * $waterPos watermark position, there are 10 states, 0 is a random position; * 1  For the top of the left, 2 for the top of the center, 3 for the top of the right; * 4 for the middle of the left, 5 for the Middle center, 6 for the middle of the right; * 7 for the bottom of the left, 8 for the bottom center, 9 for the bottom of the right; * $waterImage image watermark, that is, as a watermark * $alpha watermark transparency, value 1-100; * $waterText text watermark, that is, the text as a watermark, support ASCII code, not support Chinese; * $textFont text size, value 1, 2, 3, 4 or 5, default is 5; * $textColor text  Color, the value is the hexadecimal color value, the default is #ff0000 (red); * * $waterImage and $waterText best not to use at the same time, choose one of them, priority to use the $waterImage.  * When the $waterimage is valid, the parameters $waterstring, $stringFont, $stringColor are not effective. * The watermark image has the same file name as the $groundImage. */function Imagewatermark ($groundImage, $waterPos =0, $waterImage = ", $alpha =80, $waterText =", $water _fontfile, $  textfont=9, $textColor = ' #FF0000 ') {$isWaterImage = FALSE; $FORMATMSG = ' The picture format is not supported! Use a picture in GIF, JPG, PNG format.  ';  $fontFile = $water _fontfile;    Read watermark file if (!empty ($waterImage) && file_exists ($waterImage)) {$isWaterImage = TRUE;    $water _info = getimagesize ($waterImage); $water _w = $water _info[0];//obtains the width $water of the watermark picture _h =$water _info[1];//get watermark Picture of high switch ($water _info[2]) {//Get watermark Picture format Case 1: $water _im = Imagecreatefromgif ($waterImage); BR      Eak      Case 2: $water _im = Imagecreatefromjpeg ($waterImage);      Case 3: $water _im = Imagecreatefrompng ($waterImage);    Default:die ($FORMATMSG); }}//Read background picture if (!empty ($groundImage) && file_exists ($groundImage)) {$ground _info = getimagesize ($groundImage    );      $ground _w = $ground _info[0];//The width of the background picture $ground _h = $ground _info[1];//Get the background picture of the high switch ($ground _info[2]) {//Get the format of the background picture      Case 1: $ground _im = Imagecreatefromgif ($groundImage);      Case 2: $ground _im = Imagecreatefromjpeg ($groundImage);      Case 3: $ground _im = Imagecreatefrompng ($groundImage);    Default:die ($FORMATMSG); }}else{alert ("watermark picture does not exist!")  ");    }//Watermark position if ($isWaterImage) {//Picture watermark $w = $water _w;    $h = $water _h;  $label = "Picture"; }else{//text watermark $temp = imagettfbbox ($textFont, 0, $fontFile, $waterText);//Gets the range of text that uses TrueType fonts $w = $temP[2]-$temp [6];    $h = $temp [3]-$temp [7];    Unset ($temp);  $label = "Text Area"; } if (($ground _w< $w) | | ($ground _h< $h)) {echo "requires a watermark of the length or width of the picture than the watermark". $label. " Still small, unable to generate watermark!    ";  Return    } switch ($waterPos) {case 0://random $posX = rand (0, ($ground _w-$w));    $posY = rand (0, ($ground _h-$h));    Break    Case 1://1 for top left $posX = 0;    $posY = 0;    Break    Case 2://2 is centered on the top $posX = ($ground _w-$w)/2;    $posY = 0;    Break    Case 3://3 is the top right $posX = $ground _w-$w;    $posY = 0;    Break    Case 4://4 for the middle left $posX = 0;    $posY = ($ground _h-$h)/2;    Break    Case 5://5 Middle Center $posX = ($ground _w-$w)/2;    $posY = ($ground _h-$h)/2;    Break    Case 6://6 is the middle right $posX = $ground _w-$w;    $posY = ($ground _h-$h)/2;    Break    Case 7://7 for bottom left $posX = 0;    $posY = $ground _h-$h;    Break    Case 8://8 is centered on the bottom $posX = ($ground _w-$w)/2;    $posY = $ground _h-$h;    Break    Case 9://9 is the bottom right $posX = $ground _w-$w; $posY = $ground _H-$h;    if (! $isWaterImage) {$posY = $ground _h-$h-20;    } break;    default://Random $posX = rand (0, ($ground _w-$w));    $posY = rand (0, ($ground _h-$h));  Break  }//Set the image's process color mode imagealphablending ($ground _im, true); if ($isWaterImage) {//Picture watermark//imagecopy ($ground _im, $water _im, $posX, $posY, 0, 0, $water _w, $water _h);//copy watermark to target file//Generate mixed  Image Imagecopymerge ($ground _im, $water _im, $posX, $posY, 0, 0, $water _w, $water _h, $alpha);      } else {//Text watermark if (!empty ($textColor) && (strlen ($textColor) ==7)) {$R = Hexdec (substr ($textColor,));      $G = Hexdec (substr ($textColor, 3,2));    $B = Hexdec (substr ($textColor, 5)); } else {die ("watermark text color format is incorrect!)    ");  } imagestring ($ground _im, $textFont, $posX, $posY, $waterText, Imagecolorallocate ($ground _im, $R, $G, $B));  }//Image @unlink ($groundImage) after Watermark is generated;    Switch ($ground _info[2]) {//Get background picture format case 1:imagegif ($ground _im, $groundImage); Case 2:imagejpeg ($ground _im, $groundImage, 100) break;//note100 is the best picture quality, but the file size will increase a lot, 95 when the quality is good, the size and the original is similar.    The author uses a value of 95.    Case 3:imagepng ($ground _im, $groundImage);  Default:die ($ERRORMSG);  }//Free memory if (isset ($water _info)) unset ($water _info);  if (Isset ($water _im)) Imagedestroy ($water _im);  unset ($ground _info); Imagedestroy ($ground _im);}

Step Two: find $json = new Services_json (); note there are two places, not the one in the alert function, add the following code:


/* Watermark Configuration Start */  $water _mark = 1;//1 for watermark, the other is not added  $water _pos = 9;//watermark location, 10 states "0 is random, 1 is the top left, 2 is the top center, 3 is the top right; 4 is the middle left, 5 is Middle Center, 6 is middle right, 7 is bottom left, 8 is bottom center, 9 is bottom "  $water _img = $_server[' Document_root ']. ' /upfiles/water.gif ';//watermark picture, default fill empty, please upload the picture to the site root upfiles, example: Water.gif  $water _alpha = 50;//watermark Transparency  $water _text = ';//watermark string, default fill empty;  $water _fontfile = $_server[' Document_root '). ' /upfiles/fonts/arial.ttf ';//font used for text watermark;  if ($water _mark = = 1) {    Imagewatermark ($file _path, $water _pos, $water _img, $water _alpha, $water _text, $water _ fontfile);  }  /* Watermark Configuration End */

After I test can be normal use, another point please note the path of the watermark picture, according to the actual situation.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.