Home Backend Development PHP Tutorial Baidu editor adds image watermark function

Baidu editor adds image watermark function

Dec 27, 2017 am 09:09 AM
picture watermark editor

How to add image watermark function to Baidu Editor? A few days ago, I changed the built-in editor of phpcms to Baidu UE editor, which is very easy to use. However, there is one thing that I am not very satisfied with, that is, I cannot add watermarks to uploaded pictures. After some research, I finally realized it and shared it. for everyone. I hope to be helpful.

The pictures uploaded by UEditor editor are automatically extracted, but the pictures do not have a watermark function. Let's take a look at it with you.

UEditor editor does not have the function of uploading pictures and adding watermarks, and requires secondary development. This example is to perform secondary development of the Baidu editor in the PHPCMS system and add the function of uploading pictures and adding watermarks.

First open the php folder in the UEditor editor file directory, open Uploader.class.php, copy the PHPCMS method of adding watermarks, add it to the end of all member methods of this class, and then modify it as follows:

//图片加水印
public function watermark($source, $target = '', $w_pos = '', $w_img = '', $w_text = '99danji',$w_font = 8, $w_color = '#ff0000') {
  $this->w_img = 'watermark.png';
  $this->w_pos = 9;
  $this->w_minwidth = 400;
  $this->w_minheight = 200;
  $this->w_quality = 80;
  $this->w_pct = 85;
 
  $w_pos = $w_pos ? $w_pos : $this->w_pos;
  $w_img = $w_img ? $w_img : $this->w_img;
  //if(!$this->watermark_enable || !$this->check($source)) return false;
  if(!$target) $target = $source;
  //$w_img = PHPCMS_PATH.$w_img;
  //define('WWW_PATH', dirname(dirname(dirname(__FILE__)));
  $w_img = '../../../images/water/'.$w_img;
  $source_info = getimagesize($source);
  $source_w  = $source_info[0];
  $source_h  = $source_info[1];
  //if($source_w < $this->w_minwidth || $source_h < $this->w_minheight) return false;
  switch($source_info[2]) {
    case 1 :
      $source_img = imagecreatefromgif($source);
      break;
    case 2 :
      $source_img = imagecreatefromjpeg($source);
      break;
    case 3 :
      $source_img = imagecreatefrompng($source);
      break;
    default :
      return false;
  }
  if(!empty($w_img) && file_exists($w_img)) {
    $ifwaterimage = 1;
    $water_info  = getimagesize($w_img);
    $width    = $water_info[0];
    $height    = $water_info[1];
    switch($water_info[2]) {
      case 1 :
        $water_img = imagecreatefromgif($w_img);
        break;
      case 2 :
        $water_img = imagecreatefromjpeg($w_img);
        break;
      case 3 :
        $water_img = imagecreatefrompng($w_img);
        break;
      default :
        return;
    }
  } else {    
    $ifwaterimage = 0;
    $temp = imagettfbbox(ceil($w_font*2.5), 0, PC_PATH.&#39;libs/data/font/elephant.ttf&#39;, $w_text);
    $width = $temp[2] - $temp[6];
    $height = $temp[3] - $temp[7];
    unset($temp);
  }
  switch($w_pos) {
    case 1:
      $wx = 5;
      $wy = 5;
      break;
    case 2:
      $wx = ($source_w - $width) / 2;
      $wy = 0;
      break;
    case 3:
      $wx = $source_w - $width;
      $wy = 0;
      break;
    case 4:
      $wx = 0;
      $wy = ($source_h - $height) / 2;
      break;
    case 5:
      $wx = ($source_w - $width) / 2;
      $wy = ($source_h - $height) / 2;
      break;
    case 6:
      $wx = $source_w - $width;
   $wy = ($source_h - $height) / 2;
      break;
    case 7:
      $wx = 0;
      $wy = $source_h - $height;
      break;
    case 8:
      $wx = ($source_w - $width) / 2;
      $wy = $source_h - $height;
      break;
    case 9:
      $wx = $source_w - $width;
      $wy = $source_h - $height;
      break;
    case 10:
      $wx = rand(0,($source_w - $width));
      $wy = rand(0,($source_h - $height));
      break;       
    default:
      $wx = rand(0,($source_w - $width));
      $wy = rand(0,($source_h - $height));
      break;
  }
  if($ifwaterimage) {
    if($water_info[2] == 3) {
      imagecopy($source_img, $water_img, $wx, $wy, 0, 0, $width, $height);
    } else {
      imagecopymerge($source_img, $water_img, $wx, $wy, 0, 0, $width, $height, $this->w_pct);
    }
  } else {
    if(!empty($w_color) && (strlen($w_color)==7)) {
      $r = hexdec(substr($w_color,1,2));
      $g = hexdec(substr($w_color,3,2));
      $b = hexdec(substr($w_color,5));
    } else {
      return;
    }
    imagestring($source_img,$w_font,$wx,$wy,$w_text,imagecolorallocate($source_img,$r,$g,$b));
  }
  
  switch($source_info[2]) {
    case 1 :
      imagegif($source_img, $target);
      break;
    case 2 :
      imagejpeg($source_img, $target, $this->w_quality);
      break;
    case 3 :
      imagepng($source_img, $target);
      break;
    default :
      return;
  }
 
  if(isset($water_info)) {
    unset($water_info);
  }
  if(isset($water_img)) {
    imagedestroy($water_img);
  }
  unset($source_info);
  imagedestroy($source_img);
  return true;
}
 
public function check($image) {
  return extension_loaded(&#39;gd&#39;) && preg_match("/\.(jpg|jpeg|gif|png)/i", $image, $m) && file_exists($image) && function_exists(&#39;imagecreatefrom&#39;.($m[1] == &#39;jpg&#39; ? &#39;jpeg&#39; : $m[1]));
}
Copy after login

Comparing the parts I modified, since phpcms watermark can be managed and set in the background, the watermark method that comes with phpcms obtains the path by reading the configuration file, and reads Database settings obtain parameter settings, then these places need to be set manually.

By the way, we need to add a function in the upFile method:


##Copy code The code is as follows:

if ($this->watermark) {
$this->watermark($this->filePath,$this->filePath);
}

Then open the action_upload.php file in the php directory of UEditor Baidu Editor, and add the parameters of whether to add a watermark:

/* 上传配置 */
$base64 = "upload";
switch (htmlspecialchars($_GET[&#39;action&#39;])) {
  case &#39;uploadimage&#39;:
    $config = array(
      "pathFormat" => $CONFIG[&#39;imagePathFormat&#39;],
      "maxSize" => $CONFIG[&#39;imageMaxSize&#39;],
      "allowFiles" => $CONFIG[&#39;imageAllowFiles&#39;]
    );
    $fieldName = $CONFIG[&#39;imageFieldName&#39;];
    $watermark = true;
    break;
Copy after login

Then there is another sentence at the end Change it to:

/* 生成上传实例对象并完成上传 */
$up = new Uploader($fieldName, $config, $base64, $watermark);
Copy after login
This way you’re done. This article mainly provides ideas and reference.

Related recommendations:

How to embed tp3 into Baidu editor ueditor?

Detailed introduction to the installation and use of php UEditor Baidu editor sharing

##yii2 Integrate Baidu editor umeditor, yii2 integrate umeditor_PHP tutorial

The above is the detailed content of Baidu editor adds image watermark function. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to add watermark to Meitu Xiuxiu? Share how to add watermark to beautiful photos! How to add watermark to Meitu Xiuxiu? Share how to add watermark to beautiful photos! Mar 16, 2024 pm 09:55 PM

Want to know how to add watermark to MeituXiuXiu? Meitu Xiuxiu is a very easy-to-use photo editing software. It provides functions such as cutting out pictures and placing them on another picture, changing the picture size by kb, removing watermarks, changing the background color of ID photos, and adding time, date and location watermarks to the full screen. Help users quickly complete the production of pictures. Some users have created their own pictures and don’t want others to steal them. They want to cover them with their own watermarks, but don’t know how to do it? The editor will now share with you how to add watermarks to beautiful photos! If you like it, come and download it! 1. How to add watermark to beautiful pictures? Share how to add watermark to beautiful photos! 1. Open the 2023 version of Meitu Xiu Xiu downloaded from this site. Meitu Xiu Xiu 2023 version Category: Shooting and beautification Download Meitu Xiu Xiu 2023 version is a feature-rich picture beautification and editing software

How to solve the problem of automatically saving pictures when publishing on Xiaohongshu? Where is the automatically saved image when posting? How to solve the problem of automatically saving pictures when publishing on Xiaohongshu? Where is the automatically saved image when posting? Mar 22, 2024 am 08:06 AM

With the continuous development of social media, Xiaohongshu has become a platform for more and more young people to share their lives and discover beautiful things. Many users are troubled by auto-save issues when posting images. So, how to solve this problem? 1. How to solve the problem of automatically saving pictures when publishing on Xiaohongshu? 1. Clear the cache First, we can try to clear the cache data of Xiaohongshu. The steps are as follows: (1) Open Xiaohongshu and click the &quot;My&quot; button in the lower right corner; (2) On the personal center page, find &quot;Settings&quot; and click it; (3) Scroll down and find the &quot;Clear Cache&quot; option. Click OK. After clearing the cache, re-enter Xiaohongshu and try to post pictures to see if the automatic saving problem is solved. 2. Update the Xiaohongshu version to ensure that your Xiaohongshu

How to remove watermark with Scanner How to remove watermark with Scanner Mar 05, 2024 pm 05:34 PM

Removing watermarks is a useful tool in the software Scanner. Some users are not sure how to remove watermarks in Scanner. You can click Remove Watermark in Edit PDF on the save interface to close it. Next, the editor will explain Users brought us an introduction to how to remove watermarks. If you are interested, come and take a look! Scanner King usage tutorial How to remove the watermark with Scanner King? Answer: You can click on the save interface to edit the watermark removal in the PDF. Details: 1. Enter the software and click the [Camera] icon. 2. Photograph and scan the documents that need to be watermarked. 3. Click [→] to proceed to the next step. 4. After completing editing, click [✓]. 5. Click [Edit PDF]. 6. Select [Remove Watermark] below.

How to remove video watermark in Wink How to remove video watermark in Wink Feb 23, 2024 pm 07:22 PM

How to remove watermarks from videos in Wink? There is a tool to remove watermarks from videos in winkAPP, but most friends don’t know how to remove watermarks from videos in wink. Next is the picture of how to remove watermarks from videos in Wink brought by the editor. Text tutorial, interested users come and take a look! How to remove video watermarks in Wink 1. First open wink APP and select the [Remove Watermark] function in the homepage area; 2. Then select the video you want to remove the watermark in the album; 3. Then select the video and click the upper right corner after editing the video. [√]; 4. Finally, click [One-click Print] as shown in the figure below and then click [Process].

How to remove watermark on Xiaomi Mi 14Ultra? How to remove watermark on Xiaomi Mi 14Ultra? Feb 28, 2024 pm 02:28 PM

Xiaomi Mi 14 Ultra is a new model with very good performance and configuration. This mobile phone also adopts a unique appearance design. It has a higher appearance and is very recognizable. Many consumers who want to buy it want to know how to use Xiaomi Mi 14 Ultra. Remove watermark? , the editor of this site will introduce it to you below! How to remove watermark from Xiaomi 14Ultra? 1. Open the camera application: Find and open the pre-installed camera application on Xiaomi 14. 2. Enter the settings menu: Tap the lower right or lower left corner of the screen (depending on which version you are using) to display the additional options button. Then, select "Settings" in the pop-up menu. 3. Turn off watermark option: In the settings menu, you will see various options and parameters. Scroll down until you find the "Watermark" option

How to post pictures in TikTok comments? Where is the entrance to the pictures in the comment area? How to post pictures in TikTok comments? Where is the entrance to the pictures in the comment area? Mar 21, 2024 pm 09:12 PM

With the popularity of Douyin short videos, user interactions in the comment area have become more colorful. Some users wish to share images in comments to better express their opinions or emotions. So, how to post pictures in TikTok comments? This article will answer this question in detail and provide you with some related tips and precautions. 1. How to post pictures in Douyin comments? 1. Open Douyin: First, you need to open Douyin APP and log in to your account. 2. Find the comment area: When browsing or posting a short video, find the place where you want to comment and click the &quot;Comment&quot; button. 3. Enter your comment content: Enter your comment content in the comment area. 4. Choose to send a picture: In the interface for entering comment content, you will see a &quot;picture&quot; button or a &quot;+&quot; button, click

How to remove the evaluation copy watermark in the lower right corner of win11 24H2? Tips for removing the evaluation copy in the lower right corner of win11 How to remove the evaluation copy watermark in the lower right corner of win11 24H2? Tips for removing the evaluation copy in the lower right corner of win11 Jun 01, 2024 pm 09:52 PM

How to remove the evaluation copy text in the lower right corner of win1124H2? When we use the system, sometimes the desktop will display a transparent watermark on the lower right corner of the screen. So how do we remove this transparent watermark? Users can directly use third-party software to operate. Let this site carefully introduce to users how to remove the watermark on the win1124H2 evaluation copy. To remove the watermark on the win1124H2 evaluation copy, download the UniversalWatermarkDisabler tool. After running it, the current system version and watermark status will be displayed. If "Ready for installation" is displayed in "Status", it can be removed.

How to set photo watermark on Xiaomi Mi 14? How to set photo watermark on Xiaomi Mi 14? Mar 18, 2024 am 11:00 AM

In order to make the photos taken more personalized and unique, Xiaomi Mi 14 provides photo watermark settings. By setting photo watermarks, users can add patterns, text and logos to the photos they take, so that each photo can better record precious moments and memories. Next, we will introduce how to set a photo watermark in Xiaomi 14 to make your photos more personalized and vivid. How to set photo watermark on Xiaomi Mi 14? 1. First click “Camera”. 2. Then click &quot;Settings&quot;. 3. Then find the watermark, and then you can start shooting.

See all articles