最近小二哥應運營要求,需在后臺編輯器做圖片添加水印功能,由于ueditor編輯器本身沒有添加水印的功能;
所以小二哥參考了網(wǎng)上的一些方法,加上實現(xiàn)的步驟整理成文檔,希望對需要的人有幫助。
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. ? 繼續(xù)在這個文件搜索代碼:
$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 方法內(nèi)部后面添加以下代碼:
if( $this->water ){ $this->watermark($this->filePath,$this->filePath);}
e. 在這個類文件里添加以下方法,實現(xiàn)圖片添加水印
/** 圖片加水印* $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;//圖像質(zhì)量$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 個單元的數(shù)組表示了文本外框的四個角$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]));}
到這一步,已經(jīng)基本完成添加水印的處理了,記得要在根目錄下放水印圖片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,添加紅框內(nèi)代碼,是為1,否為0,這樣就可以通過actionUrl傳到后臺判斷是否添加水印了
c.去php/controller.php添加以下紅框代碼,用于接收數(shù)據(jù)
d.打開ueditor目錄下的php目錄下的action_upload.php文件,如圖多傳判斷是否添加水印的參數(shù),即大功告成。
?
?
轉載于:https://www.cnblogs.com/boats/p/8110135.html
總結
以上是生活随笔為你收集整理的关于ueditor多图上传加水印的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。