PHP环境下Fckeditor上传图片配置教程

名站导航为爱好php程序的朋友们提供php相关的教程知识。

今天介绍Fckeditor上传图片功能在PhP程序中的配置方法，涉及Fckeditor上传图片的上传路径配置、限制Fckeditor上传图片大小设置、Fckeditor上传图片文件名重名及乱码解决方法以及针对上传图片添加水印功能的实现方法，只要掌握了以上四点，Fckeditor在大部分PhP程序类型网站中的应用都能解决。

开启Fckeditor上传图片功能

　　考虑到目录安全性问题，默认Fckeditor2.6.6上传功能并未开启，所以第一步我们必须开启Fckeditor上传功能，这里需要注意，由于PhP程序版本Fckeditor上传功能需要用到chomod函数对新建目录进行权限设置，所以请务必确认在启用Fckeditor上传功能时PhP程序环境的用户具有创建和更改上传目录的权限。

　　如果没有开启Fckeditor上传功能，在点击插入/编辑图像按钮，选择上传，在选择完要上传的文件后点击发送到服务器上按钮时会报错误信息如下

　　This file uploader is disabled.

　　Please check the "editor/filemanager/connectors/php/config.php" file

　　根据错误信息，打开editor/filemanager/connectors/php目录下config.php，找到

　　$Config['Enabled'] = false ;

　　更改为

　　$Config['Enabled'] = true ;

　　并在相应目录下建立userfiles上传目录后，Fckeditor上传图片功能开启。

　　特别提醒：Fckeditor似乎有个BUG漏洞，即JS兼容性还不是太完美，之前我在Google Chrome游览器下设置完后，Fckeditor PhP程序上传一直实现不了，换了IE后一切正常。

Fckeditor上传图片时上传路径配置

　　作为独立网站开发者，除了考虑技术还需要兼顾其他方便，比如SEO优化，而目录结构(URL)优化是SEO的一部分，这就需要在设置Fckeditor上传图片功能时考虑图片上传路径问题。

　　默认Fckeditor图片上传路径结构有两种形式：userfiles/文件名和userfiles/文件类型/文件名，针对两种Fckeditor上传方式：快速上传（图像属性中的上传）和服务器游览上传（图像属性中的链接），比如上传图片，QuickUpload模式上传路径为userfiles/文件名，服务器游览上传模式上传路径为userfiles/images/文件名。

　　Fckeditor图片上传路径配置如下

　　打开editor/filemanager/connectors/php目录下config.php文件，找到

　　$Config['UserFilesPath'] = '/userfiles/' ;

　　更改为

　　$Config['UserFilesPath'] = '/项目目录/userfiles/' ;

　　注意：此处userfiles文件夹是针对http://localhost/的根目录而言的。

　　以上是默认Fckeditor上传路径的配置，根据URL规划你可以自定义Fckeditor的上传目录，只要修改config.php文件中的$Config['FileTypesPath']、$Config['FileTypesAbsolutePath']、$Config['QuickUploadPath']、$Config['QuickUploadAbsolutePath']四个上传目录路径的值即可。这种方法一定程度上也能避免Fckeditor上传图片文件名重名问题。

Fckeditor上传图片文件名重名及中文乱码解决方法

　　经测试Fckeditor2.6.6并没有解决上传文件中文名变为乱码的问题，这是由于Fckeditor实现上传功能时并没有将文件重命名，容易导致上传图片文件重名及乱码问题。

　　上传图片文件重名和乱码解决方法如下

　　打开editor/filemanager/connectors/php目录下commands.php，找到FileUpload函数，在

　　$sExtension = substr( $sFileName, ( strrpos($sFileName, '.') 1 ) ) ;

　　$sExtension = strtolower( $sExtension ) ;

　　后添加

　　$sFileName = rand(0,100).".".$sExtension;

　　此处rand函数可根据需要自行改变重命名规则。

　　另一种上传图片文件名乱码解决方法为使用iconv函数对文件名进行编码转换，但仍然存在重名问题，所以针对Fckeditor上传图片文件名最好还是重命名。

Fckeditor上传图片添加水印功能

对于网站拥有者来说保护图片版权添加水印必不可少，我们可以利用PhP程序添加水印函数结合Fckeditor文件上传函数FileUpload实现图片添加水印功能。

图片支持GIF,PNG,JPG三种格式，水印图片支持PNG和GIF。

function setWater ($imgSrc, $markImg, $markText, $TextColor, $markPos, $fontType, $markType)

{

$srcInfo = @getimagesize($imgSrc);

$srcImg_w = $srcInfo[0];

$srcImg_h = $srcInfo[1];

switch ($srcInfo[2])

{

case 1:

$srcim =imagecreatefromgif($imgSrc);

break;

case 2:

$srcim =imagecreatefromjpeg($imgSrc);

break;

case 3:

$srcim =imagecreatefrompng($imgSrc);

break;

default:

die("不支持的图片文件类型");

exit;

}

if(!strcmp($markType,"img"))

{

if(!file_exists($markImg) || empty($markImg))

{

return;

}

$markImgInfo = @getimagesize($markImg);

$markImg_w = $markImgInfo[0];

$markImg_h = $markImgInfo[1];

if($srcImg_w < $markImg_w || $srcImg_h < $markImg_h)

{

return;

}

switch ($markImgInfo[2])

{

case 1:

$markim =imagecreatefromgif($markImg);

break;

case 2:

$markim =imagecreatefromjpeg($markImg);

break;

case 3:

$markim =imagecreatefrompng($markImg);

break;

default:

die("不支持的水印图片文件类型");

exit;

}

$logow = $markImg_w;

$logoh = $markImg_h;

}

if(!strcmp($markType,"text"))

{

$fontSize = 16;

if(!empty($markText))

{

if(!file_exists($fontType))

{

return;

}

else {

return;

}

$box = @imagettfbbox($fontSize, 0, $fontType,$markText);

$logow = max($box[2], $box[4]) - min($box[0], $box[6]);

$logoh = max($box[1], $box[3]) - min($box[5], $box[7]);

}

if($markPos == 0)

{

$markPos = rand(1, 9);

}

switch($markPos)

{

case 1:

$x = 5;

$y = 5;

break;

case 2:

$x = ($srcImg_w - $logow) / 2;

$y = 5;

break;

case 3:

$x = $srcImg_w - $logow - 5;

$y = 15;

break;

case 4:

$x = 5;

$y = ($srcImg_h - $logoh) / 2;

break;

case 5:

$x = ($srcImg_w - $logow) / 2;

$y = ($srcImg_h - $logoh) / 2;

break;

case 6:

$x = $srcImg_w - $logow - 5;

$y = ($srcImg_h - $logoh) / 2;

break;

case 7:

$x = 5;

$y = $srcImg_h - $logoh - 5;

break;

case 8:

$x = ($srcImg_w - $logow) / 2;

$y = $srcImg_h - $logoh - 5;

break;

case 9:

$x = $srcImg_w - $logow - 5;

$y = $srcImg_h - $logoh -5;

break;

default:

die("此位置不支持");

exit;

}

$dst_img = @imagecreatetruecolor($srcImg_w, $srcImg_h);

imagecopy ( $dst_img, $srcim, 0, 0, 0, 0, $srcImg_w, $srcImg_h);

if(!strcmp($markType,"img"))

{

imagecopy($dst_img, $markim, $x, $y, 0, 0, $logow, $logoh);

imagedestroy($markim);

}

if(!strcmp($markType,"text"))

{

$rgb = explode(',', $TextColor);

$color = imagecolorallocate($dst_img, $rgb[0], $rgb[1], $rgb[2]);

imagettftext($dst_img, $fontSize, 0, $x, $y, $color, $fontType,$markText);

}

switch ($srcInfo[2])

{

case 1:

imagegif($dst_img, $imgSrc);

break;

case 2:

imagejpeg($dst_img, $imgSrc);

break;

case 3:

imagepng($dst_img, $imgSrc);

break;

default:

die("不支持的水印图片文件类型");

exit;

}

imagedestroy($dst_img);

imagedestroy($srcim);

}

参数说明：

　　$imgSrc：目标图片，可带相对目录地址，

　　$markImg：水印图片，可带相对目录地址，支持PNG和GIF两种格式，如水印图片在执行文件mark目录下，可写成：mark/mark.gif

　　$markText：给图片添加的水印文字

　　$TextColor：水印文字的字体颜色

　　$markPos：图片水印添加的位置，取值范围：0~9

　　0：随机位置，在1~8之间随机选取一个位置

　　1：顶部居左 2：顶部居中 3：顶部居右 4：左边居中

　　5：图片中心 6：右边居中 7：底部居左 8：底部居中 9：底部居右

　　$fontType：具体的字体库，可带相对目录地址

　　$markType：图片添加水印的方式，img代表以图片方式，text代表以文字方式添加水印

具体代码如下注释：

　　第4~6行：获取目标图片的宽度和高度

　　第8~22行：根据图片类型调用不同的函数，获得操作图像标识符

　　GetImageSize函数知识点：GetImageSize不需要安装 GD度就可使用，其返回值数组有四个元素。索引值0是图片高度。索引值1是图片的宽度。索引值2是图片的文件格式，其值1为GIF格式、2为JPEG/JPG格式、3为PNG格式。索引值3为图片的高与宽字符串，height=xxx width=yyy。返回的图片宽度和高度单位都是像素(pixel)

　　第24~58行：当选择图片方式给目标图片添加水印时，获取水印图片的宽度和高度，通常情况都是网站的logo。（www.mzdh.net 网络营销）如果目标图片比水印图片宽度或者高度小或者水印图片不存在，则跳出这个函数。

　　return语句知识点：直接return 表示什么都不返回，直接结束这个函数。也可以理解成返回 NULL。

　　第60~77行：当选择文字方式给目标图片添加水印时，首先设定水印文字的大小，默认我设置为16px，你可以根据需要自行调整字体大小。如果字体文件不存在，跳出函数，最后通过imagettfbbox函数获得此设定格式的文字的虚拟长宽。

　　imagettfbbox函数知识点：此函数返回一个含有8个单元的数组表示文本外框的四个角，索引值含义：0代表左下角 X 位置，1代表坐下角 Y 位置，2代表右下角 X 位置，3代表右下角 Y 位置，4代表右上角 X 位置，5代表右上角 Y 位置，6代表左上角 X位置，7代表左上角 Y 位置。此函数同时需要GD 库和FreeType库的支持

　　max函数返回参数中数值最大的值。

　　第79~125行：根据设定的图片水印位置计算具体坐标值，你可以根据效果具体细化水印的位置。

　　第127~129行：新建一个和目标图片大小一致的图片。

　　注：由于imagecreatetruecolor函数范围的是一个黑色图片，所以如果你的目标图片是透明的，则生成的新图将不会是透明色。

　　第131~162行：根据图片或者文字方式，最终生成添加了水印的图片。