首页 > 伪编程 > 为KindEditor在线编辑器增加图片水印和缩略图功能

为KindEditor在线编辑器增加图片水印和缩略图功能

2018年3月9日 40,654 浏览数 发表评论 阅读评论

  轻量级开源KindEditor在线编辑器非常好用,虽然作者已多年不更新了,但阻挡不了我对它的喜爱。在使用之中,总是想为它加点功能,这样便可使工作更高效!

  我们在图片上传时总想自动添加水印和生成缩略图,但这些实用小功能却没见有人制作,遂Google一下资料自己捣鼓了一个,分享给大家!

  直接放出源码,对应版本为最新的“4.1.11”:

  第一步:修改\editor\kindeditor-all.js中的第7000行,用下面代码替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hiddenElements.join(''),
'<label style="width:60px;">' + lang.localUrl + '</label>',
'<input type="text" name="localUrl" class="ke-input-text" tabindex="-1" style="width:200px;" readonly="true" /> &nbsp;',
'<input type="button" class="ke-upload-button" value="' + lang.upload + '" />',
'<div class="ke-dialog-row">',
'<label style="width:60px;">是否水印</label>',
'<label><input name="iswater" type="radio" value="1" />加水印</label>',
'<label><input name="iswater" type="radio" value="0" checked="checked" />不加水印</label>',
'</div>',
'<div class="ke-dialog-row">',
'<label style="width:60px;">缩略图</label>',
'宽:<input name="thumb_width" type="text" class="ke-input-text" style="width:40px;" /> ',
'高:<input name="thumb_height" type="text" class="ke-input-text" style="width:40px;" />',
'</div>',
'</form>',
'</div>',
'</div>'

  目的是:在图片上传对话框中设置水印和缩略图选项,以便可控。

  第二步:修改\editor\lib\editor\php\upload_json.php,在$json = new Services_JSON();下面添加下列代码(注意不是function alert($msg)函数中的那条)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* 水印配置开始 */
    $watermark = isset($_REQUEST['iswater'])?$_REQUEST['iswater']:'';
    $thumb_width =  isset($_REQUEST['thumb_width'])?(int)$_REQUEST['thumb_width']:false;
    $thumb_height =  isset($_REQUEST['thumb_height'])?(int)$_REQUEST['thumb_height']:false;
    if($watermark==1){
        //判断是否缩放
        if($cfg->Def_UploadPic_Width > 0){ //自己根据需要在系统中设置图片是否缩放开关,$cfg->Def_UploadPic_Width这是我系统中使用的全局变量
            $sizewith = $cfg->Def_UploadPic_Width; //缩略图的宽度
        }else{
            $sizewith = false;
        }
        if($cfg->Def_UploadPic_Height > 0){
            $sizeheight = $cfg->Def_UploadPic_Height; //缩略图的高度
        }else{
            $sizeheight = false;
        }
        if($sizewith > 0 || $sizeheight > 0){
            $s = new Image_process( $file_path );
            $s->fixSizeImage($sizewith,$sizeheight,false);//缩放且覆盖原文件
        }
        //加水印
        $s = new Image_process( $file_path );
        $s->watermarkImage($_SERVER['DOCUMENT_ROOT'].$cfg->Def_Water_Img_Path); //$cfg->Def_Water_Img_Path为我系统中设置的水印图片路径
    }
    //缩略图
    $thumb_url = '';
    if($thumb_width == 0){
        $thumb_width = false;
    }
    if($thumb_height == 0){
        $thumb_height = false;
    }
    if($thumb_width > 0 || $thumb_height > 0){
        $s = new Image_process( $file_path );
        $s->fixSizeImage($thumb_width,$thumb_height,true);
        $thumb_url = str_ireplace('.','_thumb.',$file_url); //缩略图文件名是在原文件后增加_thumb
    }
    /* 水印配置结束 */

  在文件尾部添加相关处理类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/*
    用法:
    $s = new Image_process( $item );
    $s->watermarkImage($logo);  //生成水印
    $s->fixSizeImage(200,false,true);//生成缩略图 参数:宽,高,true另存缩略图 false覆盖原文件
 */
class Image_process{
    public $source;//原图
    public $source_width;//宽
    public $source_height;//高
    public $source_type_id;
    public $orign_name;
    public $orign_dirname;
    //传入图片路径
    public function __construct($source){
        $this->typeList      = array(1=>'gif',2=>'jpg',3=>'png');
        $ginfo               = getimagesize($source);
        $this->source_width  = $ginfo[0];
        $this->source_height = $ginfo[1];
        $this->source_type_id= $ginfo[2];
        $this->orign_url     = $source;
        $this->orign_name    = basename($source);
        $this->orign_dirname = dirname($source);
    }
 
    //判断并处理,返回PHP可识别编码
    public function judgeType($type,$source){
        if($type==1){
            return ImageCreateFromGIF($source);//gif
        }else if($type==2){
            return ImageCreateFromJPEG($source);//jpg
        }else if($type==3){
            return ImageCreateFromPNG($source);//png
        }else{
            return false;
        }
    }
 
    //生成水印图
    public function watermarkImage($logo){
        $linfo        = getimagesize($logo);
        $logo_width   = $linfo[0];
        $logo_height  = $linfo[1];
        $logo_type_id = $linfo[2];
        $sourceHandle = $this->judgeType($this->source_type_id,$this->orign_url);
        $logoHandle   = $this->judgeType($logo_type_id,$logo);
 
        if( !$sourceHandle || ! $logoHandle ){
            return false;
        }
        $x = $this->source_width - $logo_width;
        $y = $this->source_height- $logo_height;
 
        ImageCopy($sourceHandle,$logoHandle,$x,$y,0,0,$logo_width,$logo_width) or die("fail to combine");
      //  $newPic = $this->orign_dirname .'\water_'. time().'.'. $this->typeList[$this->source_type_id];
        $newPic = $this->orign_url;
        if( $this->saveImage($sourceHandle,$newPic)){
            imagedestroy($sourceHandle);
            imagedestroy($logoHandle);
        }
    }
 
    // fix 宽度
    // height = true 固顶高度
    // width  = true 固顶宽度
    public function fixSizeImage($width,$height,$thubm){
        if( $width > $this->source_width) $this->source_width;
        if( $height > $this->source_height ) $this->source_height;
        if( $width === false){
            $width = floor($this->source_width / ($this->source_height / $height));
        }
        if( $height === false){
            $height = floor($this->source_height / ($this->source_width / $width));
        }
        $this->tinyImage($width,$height,$thubm);
    }
 
    //创建略缩图
    private function tinyImage($width,$height,$thubm){
        $tinyImage = imagecreatetruecolor($width, $height );
        $handle    = $this->judgeType($this->source_type_id,$this->orign_url);
        if(function_exists('imagecopyresampled')){
            imagecopyresampled($tinyImage,$handle,0,0,0,0,$width,$height,$this->source_width,$this->source_height);
        }else{
            imagecopyresized($tinyImage,$handle,0,0,0,0,$width,$height,$this->source_width,$this->source_height);
        }
 
        //$newPic = time().'_'.$width.'_'.$height.'.'. $this->typeList[$this->source_type_id];
        if($thubm===true){
            $newPic = $this->orign_url;
            $newPic = str_ireplace('.','_thumb.',$newPic);
        }else{
            $newPic = $this->orign_url;
        }
        if( $this->saveImage($tinyImage,$newPic)){
            imagedestroy($tinyImage);
            imagedestroy($handle);
        }
    }
 
    //保存图片
    private function saveImage($image,$url){
        if(ImageJpeg($image,$url)){
            return true;
        }
    }
}
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.