zoukankan      html  css  js  c++  java
  • Kindeditor编辑器加图片上传水印功能(PHP)

    首先简单介绍一下kindeditor编辑器:
      KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
    主要特点:

    • 快速:体积小,加载速度快

    • 开源:开放源代码,高水平,高品质

    • 底层:内置自定义 DOM 类库,精确操作 DOM

    • 扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能

    • 风格:修改编辑器风格非常容易,只需修改一个 CSS 文件

    • 兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera


    转到正题,默认的编辑器上传图片时,是没有水印功能的,下面详细介绍:

    第一步:修改upload_json.php文件
    在编辑器的/php/目录下可以找到这个文件,新增一个函数:

    /*
        * 功能:PHP图片水印,水印支持图片或文字
        * 参数:
        * $groundImage 背景图片,即需要加水印的图片,暂只支持GIF,JPG,PNG格式;
        * $waterPos 水印位置,有10种状态,0为随机位置;
        *   1为顶端居左,2为顶端居中,3为顶端居右;
        *   4为中部居左,5为中部居中,6为中部居右;
        *   7为底端居左,8为底端居中,9为底端居右;
        * $waterImage 图片水印,即作为水印的图片,暂只支持GIF,JPG,PNG格式;
        * $alpha 水印透明度,取值1-100;
        * $waterText 文字水印,即把文字作为为水印,支持ASCII码,不支持中文;
        * $textFont 文字大小,值为1、2、3、4或5,默认为5;
        * $textColor 文字颜色,值为十六进制颜色值,默认为#FF0000(红色);
        *
        * $waterImage 和 $waterText 最好不要同时使用,选其中之一即可,优先使用 $waterImage。
        * 当$waterImage有效时,参数$waterString、$stringFont、$stringColor均不生效。
        * 加水印后的图片的文件名和 $groundImage 一样。
    */
    function imageWaterMark($groundImage$waterPos=0, $waterImage='', $alpha=80, $waterText='', $water_fontfile$textFont=9, $textColor='#FF0000'){
        $isWaterImage = FALSE;
        $formatMsg = '不支持该图片格式!请使用GIF、JPG、PNG格式的图片。';
        $fontFile = $water_fontfile;
        //读取水印文件
        if(!empty($waterImage) && file_exists($waterImage)){
            $isWaterImage = TRUE;
            $water_info = getimagesize($waterImage);
            $water_w = $water_info[0];//取得水印图片的宽
            $water_h = $water_info[1];//取得水印图片的高
            switch($water_info[2]){//取得水印图片的格式
                case 1:$water_im = imagecreatefromgif($waterImage);break;
                case 2:$water_im = imagecreatefromjpeg($waterImage);break;
                case 3:$water_im = imagecreatefrompng($waterImage);break;
                default:die($formatMsg);
            }
        }
        //读取背景图片
        if(!empty($groundImage) && file_exists($groundImage)){
            $ground_info = getimagesize($groundImage);
            $ground_w = $ground_info[0];//取得背景图片的宽
            $ground_h = $ground_info[1];//取得背景图片的高
            switch($ground_info[2]){//取得背景图片的格式
                case 1:$ground_im = imagecreatefromgif($groundImage);break;
                case 2:$ground_im = imagecreatefromjpeg($groundImage);break;
                case 3:$ground_im = imagecreatefrompng($groundImage);break;
                default:die($formatMsg);
            }
        }else{
            alert("水印图片不存在!");
        }
        //水印位置
        if($isWaterImage){//图片水印
            $w = $water_w;
            $h = $water_h;
            $label = "图片的";
        }else{//文字水印
            $temp = imagettfbbox($textFont, 0, $fontFile$waterText);//取得使用 TrueType 字体的文本的范围
            $w = $temp[2] - $temp[6];
            $h = $temp[3] - $temp[7];
            unset($temp);
            $label = "文字区域";
        }
        if(($ground_w<$w) || ($ground_h<$h)){
            echo "需要加水印的图片的长度或宽度比水印".$label."还小,无法生成水印!";
            return;
        }
        switch($waterPos){
            case 0://随机
            $posX = rand(0,($ground_w - $w));
            $posY = rand(0,($ground_h - $h));
            break;
            case 1://1为顶端居左
            $posX = 0;
            $posY = 0;
            break;
            case 2://2为顶端居中
            $posX = ($ground_w - $w) / 2;
            $posY = 0;
            break;
            case 3://3为顶端居右
            $posX = $ground_w - $w;
            $posY = 0;
            break;
            case 4://4为中部居左
            $posX = 0;
            $posY = ($ground_h - $h) / 2;
            break;
            case 5://5为中部居中
            $posX = ($ground_w - $w) / 2;
            $posY = ($ground_h - $h) / 2;
            break;
            case 6://6为中部居右
            $posX = $ground_w - $w;
            $posY = ($ground_h - $h) / 2;
            break;
            case 7://7为底端居左
            $posX = 0;
            $posY = $ground_h - $h;
            break;
            case 8://8为底端居中
            $posX = ($ground_w - $w) / 2;
            $posY = $ground_h - $h;
            break;
            case 9://9为底端居右
            $posX = $ground_w - $w;
            $posY = $ground_h - $h;
            if(!$isWaterImage){
            $posY = $ground_h - $h-20;
            }
            break;
            default://随机
            $posX = rand(0,($ground_w - $w));
            $posY = rand(0,($ground_h - $h));
            break;
        }
        //设定图像的混色模式
        imagealphablending($ground_imtrue);
        if($isWaterImage){//图片水印
            //imagecopy($ground_im, $water_im, $posX, $posY, 0, 0, $water_w,$water_h);//拷贝水印到目标文件
            //生成混合图像
            imagecopymerge($ground_im$water_im$posX$posY, 0, 0, $water_w$water_h$alpha);
        } else {//文字水印
            if( !empty($textColor) && (strlen($textColor)==7)){
                $R = hexdec(substr($textColor,1,2));
                $G = hexdec(substr($textColor,3,2));
                $B = hexdec(substr($textColor,5));
            } else {
                die("水印文字颜色格式不正确!");
            }
            imagestring($ground_im$textFont$posX$posY$waterText, imagecolorallocate($ground_im$R$G$B));
        }
        //生成水印后的图片
        @unlink($groundImage);
        switch($ground_info[2]){//取得背景图片的格式
            case 1:imagegif($ground_im,$groundImage);break;
            case 2:imagejpeg($ground_im,$groundImage,100);break;//注意这里的100,经测试,100是图片质量最佳的,但文件大小会增加很多,95的时候质量还不错,大小和原来的差不多。作者采用95的值。
            case 3:imagepng($ground_im,$groundImage);break;
            default:die($errorMsg);
        }
        //释放内存
        if(isset($water_info)) unset($water_info);
        if(isset($water_im)) imagedestroy($water_im);
        unset($ground_info);
        imagedestroy($ground_im);
    }

    第二步:找到$json = new Services_JSON();注意有两个地方,不是在alert函数里的那个,添加如下代码:

        /* 水印配置开始 */
        $water_mark = 1;//1为加水印, 其它为不加
        $water_pos = 9;//水印位置,10种状态【0为随机,1为顶端居左,2为顶端居中,3为顶端居右;4为中部居左,5为中部居中,6为中部居右;7为底端居左,8为底端居中,9为底端居】
        $water_img = $_SERVER['DOCUMENT_ROOT'].'/upfiles/water.gif';//水印图片,默认填写空,请将图片上传至网站根目录的upfiles下,例: water.gif
        $water_alpha = 50;//水印透明度
        $water_text = '';//水印字符串,默认填写空;
        //$water_fontfile = $_SERVER['DOCUMENT_ROOT'] .'/upfiles/fonts/arial.ttf';//文字水印使用的字体;
        if($water_mark == 1){
            imageWaterMark($file_path$water_pos$water_img$water_alpha$water_text$water_fontfile);
        }
        /* 水印配置结束 */

    经本人测试可以正常使用,另外一点请注意水印图片的路径,根据实际情况而定。

  • 相关阅读:
    个人作业——软件工程实践总结&个人技术博客
    Vue实现表格导出Excel
    个人作业——软件测评
    结对第二次—某次疫情统计可视化的实现
    结对第一次—疫情统计可视化(原型设计)
    代码规范
    软工实践寒假作业(2/2)
    软工实践寒假作业(1/2)
    个人作业——软件工程实践总结&个人技术博客
    Android 自定义控件
  • 原文地址:https://www.cnblogs.com/xynetstudio/p/7278810.html
Copyright © 2011-2022 走看看