kindeditor 上传图片 php,Kindeditor编辑器添加图片上传水印功能(php代码)

Kindeditor编辑器添加图片上传水印功能(php代码)

发布于 2017-08-21 09:04:36 | 119 次阅读 | 评论: 0 | 来源: 网友投递

PHP开源脚本语言PHP(外文名: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点,入门门槛较低,易于学习,使用广泛,主要适用于Web开发领域。PHP的文件后缀名为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

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_im, true);

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

}

/* 水印配置结束 */

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持PHPERZ。

相关阅读:

Kindeditor编辑器添加图片上传水印功能(php代码)

php实现图片上传时添加文字和图片水印技巧

php实现多张图片上传加水印功能示例

php+js实现异步图片上传实例

PHP图片上传代码示例讲解

PHP使用 swfupload图片上传的实例代码

PHP支持多种格式图片上传示例(支持jpg、png、gif)

PHP 图片上传代码示例

php图片上传,并可以预览功能实现示例

PHP 图片上传示例代码

php 图片上传类代码

PHP图片上传简单示例

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: KindEditor编辑器可以通过以下步骤上传多张图片: 1. 点击编辑器中的“插入图片”按钮。 2. 在弹出的对话框中,选择“上传图片”选项卡。 3. 点击“选择文件”按钮,选择要上传的图片文件。 4. 重复步骤3,选择多张图片文件。 5. 点击“开始上传”按钮,等待上传完成。 6. 上传完成后,可以在“已上传图片”选项卡中查看已上传的图片。 7. 选中要插入的图片,点击“确定”按钮即可插入到编辑器中。 注意:上传多张图片时,需要等待每张图片上传完成后再选择下一张图片,否则可能会导致上传失败。 ### 回答2: kindeditor是一款非常常用的富文本编辑器,它不仅提供了基本的文本编辑功能,而且还支持上传多张图片的功能。下面就详细介绍一下如何使用kindeditor上传多张图片。 1. 准备工作 首先,在使用kindeditor上传多张图片之前,我们需要先准备好以下内容: ① kindeditor编辑器文件 ② kindeditor上传图片的处理程序文件,这个一般是后台开发人员编写的 ③ 存储上传图片的文件夹,这个一般由后台开发人员在处理程序中设置。 2. 设置kindeditor编辑器 在前端页面中,我们需要先引入kindeditor编辑器的相关文件。这些文件一般包括kindeditor.js和kindeditor.css等。引入之后,我们需要对kindeditor进行一些基本设置,如设置编辑器的宽度、高度等。同时,还需要在配置文件中设置上传图片的选项。 其中,设置上传图片的选项需要设置上传图片的处理程序地址、允许上传的图片类型、最大可以上传的图片大小、是否可以上传多张图片等。 3. 编写后端处理程序 在上传图片的处理程序中,我们一般需要在程序中编写以下基本功能: ① 判断上传的文件是否合法,包括文件类型是否允许上传、文件大小是否在规定范围内等。 ② 将上传的图片保存到指定文件夹中。 ③ 返回上传结果,一般是返回上传的图片地址或者上传失败的原因等。 4. 使用 在前端页面中,我们可以通过点击上传图片按钮来触发上传图片功能。在点击上传图片按钮后,会弹出选择图片的对话框,我们可以选择多张图片,然后分别进行上传。上传完成后,可以在编辑器中看到上传的图片。 总的来说,kindeditor上传多张图片的功能非常实用,可以让我们的文章或网站更加丰富和有趣。同时,对于后端开发人员来说,也需要注意上传图片的文件类型和大小等问题,以确保上传图片的安全性和稳定性。 ### 回答3: KindEditor是一款基于jQuery和Zlib的网页富文本编辑器,它支持表格、混合开发、超过40种已配置的插件、代码自动提示与补全。在KindEditor中,用户可以方便地插入各类多媒体元素,包括图片、音视频等。也就是说,在KindEditor中上传多张图片非常容易。 具体的上传过程可以分为以下几个步骤: 1. 在前端页面中添加一个文件上传控件,例如: <input type="file" id="file" name="file" multiple/> 其中,multiple属性表示可以选择多个文件进行上传。 2. 在JavaScript中添加上传代码。使用KindEditor自带的uploadJson接口可以实现多张图片的上传: KindEditor.ready(function(K) { var editor = K.editor({ // 设置上传接口 uploadJson: '/upload_json.php', fileManagerJson: '/file_manager_json.php' }); K('#upload_img_btn').click(function() { editor.loadPlugin('multiimage', function() { // 打开上传多张图片的窗口 editor.plugin.multiImageDialog({ clickFn: function(data) { // 上传成功后执行的回调函数 } }); }); }); }); 在上述代码中,uploadJson属性设置上传接口,multiImageDialog方法打开多张图片上传的窗口。 3. 在服务器端编写PHP代码处理上传请求。具体的实现方式因不同的后端语言而异,在PHP中,可以使用$_FILE数组来处理上传文件。例如: if(!empty($_FILES['file']['name'])) { $fileArr = $_FILES['file']; for($i=0; $i<count($fileArr['name']); $i++) { $tmp_name = $fileArr['tmp_name'][$i]; $name = $fileArr['name'][$i]; // 保存文件到指定目录 move_uploaded_file($tmp_name, 'uploads/'.$name); $urlArr[] = 'uploads/'.$name; } echo json_encode(array('error' => 0, 'data' => $urlArr)); } 其中,$fileArr为上传的文件数组,$urlArr保存上传成功后每个文件的URL地址。 综上所述,KindEditor编辑器上传多张图片的步骤包括前端文件上传控件的添加、JavaScript上传代码的编写以及后端服务器代码的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值