為百度UEditor編輯器添加圖片上傳水印功能

為百度UEditor編輯器添加圖片上傳水印功能

百度UEditor編輯器預設不支援圖片上傳自動加水印，需進行二次開發。本文以PHPCMS系統為例，詳細說明如何在UEditor中集成水印功能。

核心步驟

1. 修改 Uploader.class.php 添加水印方法

打開 php/Uploader.class.php，在類末尾新增 watermark() 方法：

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;
    $w_img = '../../../images/water/' . $w_img; // 水印圖片路徑

    $source_info = getimagesize($source);
    $source_w = $source_info[0];
    $source_h = $source_info[1];

    // 根據圖片類型創建資源
    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 . 'libs/data/font/elephant.ttf', $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('gd') 
        && preg_match("/\.(jpg|jpeg|gif|png)/i", $image, $m) 
        && file_exists($image) 
        && function_exists('imagecreatefrom' . ($m[1] == 'jpg' ? 'jpeg' : $m[1]));
}

2. 在 upFile 方法中調用水印

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

3. 修改 action_upload.php 傳遞水印參數

case 'uploadimage':
    $config = array(
        "pathFormat" => $CONFIG['imagePathFormat'],
        "maxSize" => $CONFIG['imageMaxSize'],
        "allowFiles" => $CONFIG['imageAllowFiles']
    );
    $fieldName = $CONFIG['imageFieldName'];
    $watermark = true; // 啟用水印
    break;

// 實例化上傳類時傳入參數
$up = new Uploader($fieldName, $config, $base64, $watermark);

注意事項

• 水印圖片需預先放置於指定目錄（../../../images/water/）。
• PHPCMS原有水印配置讀取邏輯需手動改為固定參數或從配置文件讀取。
• 確保服務器啟用 GD 庫並支援 FreeType（文字水印需求）。

完成上述修改後，UEditor上傳圖片將自動帶上水印，有效保護圖片版權。