關於ueditor多圖上傳加水印

最近小二哥應運營要求，需在后台編輯器做圖片添加水印功能，由於ueditor編輯器本身沒有添加水印的功能；

所以小二哥參考了網上的一些方法，加上實現的步驟整理成文檔，希望對需要的人有幫助。

1.打開ueditor目錄下的php目錄下的config.json 文件
在上傳配置項添加下面代碼：
"iswatermark": "true",

2.打開ueditor目錄下的php目錄下的action_upload.php文件，搜索代碼：
a.
case 'uploadimage':
$config = array(
"pathFormat" => $CONFIG['imagePathFormat'],
"maxSize" => $CONFIG['imageMaxSize'],
"allowFiles" => $CONFIG['imageAllowFiles']
);
$fieldName = $CONFIG['imageFieldName'];
break;
在“break;”前添加：$watermark = $CONFIG['iswatermark']; 這句話就可以讀取配置文件的"iswatermark"值了。
b.   繼續在這個文件搜索代碼：
$up = new Uploader($fieldName, $config, $base64);
把它改成：$up = new Uploader($fieldName, $config, $base64, $watermark); 這樣就可以實例化Uploader類時帶上$watermark變量。

3.打開ueditor目錄下的php目錄下的Uploader.class.php文件。
a.  在這個類里面添加“ private $water; //是否添加水印(屬性) ”這句話。
b.  把構造方法改成（public function __construct($fileField, $config, $type = "upload", $watermark = false）。
c.  在構造方法里面寫上 （$this->water = $watermark; ）這句話。
d.  在upFile 方法內部后面添加以下代碼：
　

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

e. 在這個類文件里添加以下方法，實現圖片添加水印

 /*
     * 圖片加水印
     * $source  string  圖片資源
     * $target  string  添加水印后的名字
     * $w_pos   int     水印位置安排（1-10）【1:左頭頂；2:中間頭頂；3:右頭頂...值空:隨機位置】
     * $w_img   string  水印圖片路徑
     * $w_text  string  顯示的文字
     * $w_font  int     字體大小
     * $w_color string  字體顏色
    */
    public function watermark($source, $target = '', $w_pos = '', $w_img = '', $w_text = '留學問多點',$w_font = 10, $w_color = '#CC0000') {
        $this->w_img = '../watermark.png';//水印圖片
        $this->w_pos = 9;
        $this->w_minwidth = 220;//最少寬度
        $this->w_minheight = 220;//最少高度
        $this->w_quality = 80;//圖像質量
        $this->w_pct = 50;//透明度
         
        $w_pos = $w_pos ? $w_pos : $this->w_pos;
        $w_img = $w_img ? $w_img : $this->w_img;
        if(!$this->check($source)) return false;
        if(!$target) $target = $source;
        $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 : //GIF格式
            $source_img = imagecreatefromgif($source);
            break;
            case 2 : //JPG格式
            $source_img = imagecreatefromjpeg($source);
            break;
            case 3 : //PNG格式
            $source_img = imagecreatefrompng($source);
            //imagealphablending($source_img,false); //關閉混色模式
               imagesavealpha($source_img,true); //設置標記以在保存 PNG 圖像時保存完整的 alpha 通道信息（與單一透明色相反）
            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);
                    imagealphablending($water_img,false);
                    imagesavealpha($water_img,true);
                break;
                default :
                return;
            }
        }else{
        $ifwaterimage = 0;
        $temp = imagettfbbox(ceil($w_font*2.5), 0, './MPublic/fonts/heiti.otf', $w_text); //imagettfbbox返回一個含有 8 個單元的數組表示了文本外框的四個角
        $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+5);
            $wy = $source_h - ($height+5);
            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;
        }
        /*
            dst_im  目標圖像
            src_im  被拷貝的源圖像
            dst_x   目標圖像開始 x 坐標
            dst_y   目標圖像開始 y 坐標，x,y同為 0 則從左上角開始
            src_x   拷貝圖像開始 x 坐標
            src_y   拷貝圖像開始 y 坐標，x,y同為 0 則從左上角開始拷貝
            src_w   （從 src_x 開始）拷貝的寬度
            src_h   （從 src_y 開始）拷貝的高度
            pct 圖像合並程度，取值 0-100 ，當 pct=0 時，實際上什么也沒做，反之完全合並。
        */
        if($ifwaterimage) {
            if($water_info[2] == 3) {
                imagecopy($source_img, $water_img, $wx + 10, $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); 
                //GIF 格式將圖像輸出到瀏覽器或文件(欲輸出的圖像資源, 指定輸出圖像的文件名)
            break;
            case 2 :
                imagejpeg($source_img, $target, $this->w_quality);
            break;
            case 3 :
                imagepng($source_img, $target);
            break;
            default :
            return;
        }
        
        // $font = "./MPublic/fonts/heiti.otf";

        // $image->open($name)->text("留學問多點",$font,27,'#82797A',array(95,$height))->save($name);

        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]));
    }

　到這一步，已經基本完成添加水印的處理了，記得要在根目錄下放水印圖片watermark.png；

 

4.第四步要解決的是前台選擇“是否添加水印”的交互

a.在/dialogs/image/image.html添加以下代碼：

<span class="water"">
            水印: <input  type="radio" name="iswater" class="iswater iswater_a" value="1" checked>是
            <input type="radio" name="iswater" class="iswater iswater_b" value="0" >否
        </span>

 b.去image.js找到actionUrl，添加紅框內代碼，是為1，否為0，這樣就可以通過actionUrl傳到后台判斷是否添加水印了

c.去php/controller.php添加以下紅框代碼，用於接收數據

d.打開ueditor目錄下的php目錄下的action_upload.php文件,如圖多傳判斷是否添加水印的參數，即大功告成。