KindEditor修改图片上传 kindeditor只上传图片

因实际需要对上传的图片进行缩略、添加水印效果,对KindEditor进行了一次修改。
版本 kindeditor-4.1.7.zip
效果图如下:




下面是步骤:
一、修改 kindeditorpluginsimageimage.js 文件
在77行的form表单中添加自己需要的表单内容
'<form method="post"enctype="multipart/form-data" target="' + target + '" action="' +K.addParam(uploadJson, 'dir=image') + '">',
//file
'<input type="hidden" name="hub_id" value="' +self.hub_id + '" />',
'<div>',
hiddenElements.join(''),
'<label>' +lang.localUrl + '</label>',
'<input type="text" name="localUrl" tabindex="-1"readonly="true" /> &nbsp;',
'<input type="button"value="' + lang.upload + '" />',
'</div>',
'<div>',
'<input type="radio" id="thum0" name="thum"value="0" checked="checked" /><labelfor="thum0">' + lang.thum0 +'</label>',
'<input type="radio" id="thum1" name="thum"value="1" /><labelfor="thum1">' + lang.thum1 +'</label>',
lang.thumw,
'<input type="text" name="thumw" value="500"size="4" />',
'<br />',
'<input type="radio" id="wm0" name="wm" value="0"checked="checked" /><labelfor="wm0">' + lang.wm0 +'</label>',
'<input type="radio" id="wm1" name="wm" value="1"/><label for="wm1">' +lang.wm1 + '</label>',
'<input type="radio" id="wm2" name="wm" value="2"/><label for="wm2">' +lang.wm2 + '</label>',
'<br />',
'<input type="radio" id="pos1" name="pos" value="1"/><label for="pos1">'+ lang.watermarkPos1 +'</label>',
'<input type="radio" id="pos2" name="pos" value="2"/><label for="pos2">'+ lang.watermarkPos2 +'</label>',
'<input type="radio" id="pos3" name="pos" value="3"/><label for="pos3">'+ lang.watermarkPos3 +'</label>',
'<br />',
'<input type="radio" id="pos4" name="pos" value="4"/><label for="pos4">'+ lang.watermarkPos4 +'</label>',
'<input type="radio" id="pos5" name="pos" value="5"/><label for="pos5">'+ lang.watermarkPos5 +'</label>',
'<input type="radio" id="pos6" name="pos" value="6"/><label for="pos6">'+ lang.watermarkPos6 +'</label>',
'<br />',
'<input type="radio" id="pos7" name="pos" value="7"/><label for="pos7">'+ lang.watermarkPos7 +'</label>',
'<input type="radio" id="pos8" name="pos" value="8"/><label for="pos8">'+ lang.watermarkPos8 +'</label>',
'<input type="radio" id="pos9" name="pos" value="9"checked="checked" /><labelfor="pos9">' + lang.watermarkPos9 +'</label>',
'<input type="radio" id="pos0" name="pos" value="0"/><label for="pos0">'+ lang.watermarkPos0 +'</label>',
'</div>',
'</form>',

二、修改语言包
找到image部分的代码,添加自己需要的名称

1、kindeditorlangzh_CN.js文件
'image.remoteImage' : '网络图片',
'image.localImage' : '本地上传',
'image.remoteUrl' : '图片地址',
'image.localUrl' : '上传文件',
'image.size' : '图片大小',
'image.width' : '宽',
'image.height' : '高',
'image.resetSize' : '重置大小',
'image.align' : '对齐方式',
'image.defaultAlign' : '默认方式',
'image.leftAlign' : '左对齐',
'image.rightAlign' : '右对齐',
'image.imgTitle' : '图片说明',
'image.upload' : '浏览...',
'image.viewServer' : '图片空间',
'image.thum0' : '不缩略',
'image.thum1' : '缩略图',
'image.thumw' : '宽度',
'image.wm0' : '无水印',
'image.wm1' : '水印1',
'image.wm2' : '水印2',
'image.watermarkPos1' : '左上',
'image.watermarkPos2' : '中上',
'image.watermarkPos3' : '右上',
'image.watermarkPos4' : '左中',
'image.watermarkPos5' : '中中',
'image.watermarkPos6' : '右中',
'image.watermarkPos7' : '左下',
'image.watermarkPos8' : '中下',
'image.watermarkPos9' : '右下',
'image.watermarkPos0' : '随机',

2、kindeditorlangen.js文件
'image.remoteImage' : 'Insert URL',
'image.localImage' : 'Upload',
'image.remoteUrl' : 'URL',
'image.localUrl' : 'File',
'image.size' : 'Size',
'image.width' : 'Width',
'image.height' : 'Height',
'image.resetSize' : 'Reset dimensions',
'image.align' : 'Align',
'image.defaultAlign' : 'Default',
'image.leftAlign' : 'Left',
'image.rightAlign' : 'Right',
'image.imgTitle' : 'Title',
'image.upload' : 'Browse',
'image.viewServer' : 'Browse',
'image.thum0' : 'No Thumbnail',
'image.thum1' : 'Do Thumbnail',
'image.thumw' : 'Width',
'image.wm0' : 'nothing',
'image.wm1' : 'watermark1',
'image.wm2' : 'watermark2',
'image.watermarkPos1' : 'TopLeft',
'image.watermarkPos2' : 'TopCenter',
'image.watermarkPos3' : 'TopRight',
'image.watermarkPos4' : 'MiddleLeft',
'image.watermarkPos5' : 'MiddleCenter',
'image.watermarkPos6' : 'MiddleRight',
'image.watermarkPos7' : 'BottomLeft',
'image.watermarkPos8' : 'BottomCenter',
'image.watermarkPos9' : 'BottomRight',
'image.watermarkPos0' : 'Random',

三、修改php上传程序 kindeditorphpupload_json.php
1、修改为自己的图片保存路径
//文件保存目录路径
$save_path = $php_path . '../attached/';
$save_path = '/var/www/html/aaa/images/';
//文件保存目录URL
$save_url = $php_url . '../attached/';
$save_url = 'http://www.xxx.com/images/';

2、接收表单数据
$thum = intval($_POST['thum']);
$thumw = intval($_POST['thumw']);
$wm =intval($_POST['wm']);
$pos =intval($_POST['pos']);

处理数据
#缩略图片
if (is_file( $file_path ) && $thum=='1'){
$thumw = $thumw ? $thumw : 500;
resizeimage($file_path, $file_path, $thumw, 10000);
}
#添加水印
if ( $wm =='1' && is_file( $file_path )){
$watermark = '../../images/zjmark.png';
imageWater($file_path,$watermark,$pos);
}elseif ($wm == '2' && is_file( $file_path )){
$watermark = '../../images/automark.png';
imageWater($file_path,$watermark,$pos);
}



另附php缩略函数、水印函数。大家可以根据自己的需求修改。
function imageWater($sFile,$watermark,$pos=9){

if($imType1= getimagesize($sFile)){

$imType2 = getimagesize($watermark);

$imagex1 = $imType1[0];
$imagey1 = $imType1[1];
$type1 = $imType1[2];

$imagex2 = $imType2[0];
$imagey2 = $imType2[1];
$type2 = $imType2[2];

switch($type1) {
case 1:
$image1 = imagecreatefromgif($sFile);
break;
case 2:
$image1 = imagecreatefromjpeg($sFile);
break;
case 3:
$image1 = imagecreatefrompng($sFile);
break;
default:
}
switch($type2) {
case 1:
$image2 = imagecreatefromgif($watermark);
break;
case 2:
$image2 = imagecreatefromjpeg($watermark);
break;
case 3:
$image2 = imagecreatefrompng($watermark);
break;
default:
KindEditor修改图片上传 kindeditor只上传图片
}

switch($pos)
{
case 0: #随机
$dst_x = rand(0,($imagex1 - $imagex2));
$dst_y = rand(0,($imagey1 - $imagey2));
break;
case 1: #1为顶端居左
$dst_x = 0;
$dst_y = 0;
break;
case 2: #2为顶端居中
$dst_x = ($imagex1 - $imagex2) / 2;
$dst_y = 0;
break;
case 3: #3为顶端居右
$dst_x = $imagex1 - $imagex2;
$dst_y = 0;
break;
case 4: #4为中部居左
$dst_x = 0;
$dst_y = ($imagey1 - $imagey2) / 2;
break;
case 5: #5为中部居中
$dst_x = ($imagex1 - $imagex2) / 2;
$dst_y = ($imagey1 - $imagey2) / 2;
break;
case 6: #6为中部居右
$dst_x = $imagex1 - $imagex2;
$dst_y = ($imagey1 - $imagey2) / 2;
break;
case 7: #7为底端居左
$dst_x = 0;
$dst_y = $imagey1 - $imagey2;
break;
case 8: #8为底端居中
$dst_x = ($imagex1 - $imagex2) / 2;
$dst_y = $imagey1 - $imagey2;
break;
case 9: #9为底端居右
$dst_x = $imagex1 - $imagex2;
$dst_y = $imagey1 - $imagey2;
break;
default: #随机
$dst_x = rand(0,($imagex1 - $imagex2));
$dst_y = rand(0,($imagey1 -$imagey2));
}

imagecopy ( $image1, $image2, $dst_x, $dst_y, 0, 0, $imagex2,$imagey2 );

switch($type1) {
case 1:
imagegif($image1, $sFile);
break;
case 2:
imagejpeg($image1, $sFile);
break;
case 3:
imagepng($image1, $sFile);
break;
default:
}

imagedestroy($image1);
imagedestroy($image2);
}
}

function resizeimage($srcfile, $dstfile,$maxwidth,$maxheight){

$size=getimagesize($srcfile);

switch($size[2]){
case 1:
$img=imagecreatefromgif($srcfile);
break;

case 2:
$img=imagecreatefromjpeg($srcfile);
break;

case 3:
$img=imagecreatefrompng($srcfile);
break;

default:
return false;
}

#源图片的宽度和高度
$srcw=imagesx($img);
$srch=imagesy($img);
#目的图片的宽度和高度

if(($maxwidth && $srcw> $maxwidth) || ($maxheight&& $srch >$maxheight)){
if($maxwidth && $srcw> $maxwidth)
{
$widthratio = $maxwidth/$srcw;
$resizewidth_tag = true;
}
if($maxheight && $srch> $maxheight)
{
$heightratio = $maxheight/$srch;
$resizeheight_tag = true;
}
if($resizewidth_tag &&$resizeheight_tag)
{
if($widthratio < $heightratio)
{
$ratio = $widthratio;
}
else
{
$ratio = $heightratio;
}
}
if($resizewidth_tag &&!$resizeheight_tag)
{
$ratio = $widthratio;
}
if($resizeheight_tag &&!$resizewidth_tag)
{
$ratio = $heightratio;
}
}
if(!$ratio)$ratio = 1;
$dstw=floor($srcw*$ratio);
$dsth=floor($srch*$ratio);

#新建一个真彩色图像
$im=imagecreatetruecolor($dstw,$dsth);
$black=imagecolorallocate($im,255,255,255);

imagefilledrectangle($im,0,0,$dstw,$dsth,$black);
#imagecopyresized($im,$img,0,0,0,0,$dstw,$dsth,$srcw,$srch);#imagecopyresized()函数在所有GD版本中有效,但其缩放图像的算法比较粗糙.
imagecopyresampled($im,$img,0,0,0,0,$dstw,$dsth,$srcw,$srch);#imagecopyresampled()其像素插值算法得到的图像边缘比较平滑.质量较好(但该函数的速度比ImageCopyResized()慢

switch($size[2]) {
case 1:
imagegif($im, $dstfile);
break;

case 2:
imagejpeg($im, $dstfile);
break;

case 3:
imagepng($im, $dstfile);
break;

default:
return false;
}
imagedestroy($im);
imagedestroy($img);
returntrue;
}


附:
在文章中插入自己的分页标记,且让分页标记不处于段落中
var cmd = editor.cmd;
cmd.split(true);
editor.insertHtml(pagetag);

插入前:
<p>这是一段用来测试分页标记的文章</p>

插入分页标记#--#后的效果
<p>这是一段用来测试</p>
#--#
<p>分页标记的文章</p>

  

爱华网本文地址 » http://www.aihuau.com/a/25101016/296423.html

更多阅读

ps怎么修改图片文字 photoshop改图片文字

ps怎么修改图片文字——简介PS里修改图片文字,分两种情况;一,如果是源文件的话,就是格式为psd的文件,就可以直接用文字工具改;二,如果仅仅是一张JPG的图片文件的话,要改上面的文字,就有点小麻烦,不过看了步骤其实也挺简单的。ps怎么修改图片

如何修改图片的默认打开程序 微信修改默认打开程序

如何修改图片的默认打开程序——简介因为写经验的缘故,经常要改一些图片,win7老是用看照片这些不能修改的软件打开,决定改一下图片的默认打开程序。如何修改图片的默认打开程序——工具/原料win7如何修改图片的默认打开程序——方法/

如何修改网页内容 如何修改网页上的字

如何修改网页内容——简介如果你的网银里有一千块,你又想让你的朋友对你羡慕妒忌恨,那该怎么办?截图PS后再发给他看?当然是个法子,但是PS谈何容易,容易被识破不说,还很麻烦,等你做完图片,恶作剧的心都没了,今天教大家一个直接修改网

怎么修改图片大小 怎么修改图片尺寸大小

怎么修改图片大小——简介我们在制作头像,制作个性签名时经常需要一定尺寸的图片,譬如QQ头像是60*60或者100*100的,那么我们怎么修改一个图片的大小呢?需要什么软件或者什么东西?下边就来讲几个修改图片大小的方法,供大家学习使用。

怎么用photoshop仿制图章工具修改图片? ps仿制图章工具

我做图的时候难买会碰到一些有一部分和另一部分场景不是很融洽的时候,那么我们怎么修改图片的这种情况。——————————下面我随便找一张图片给大家说一下方法!怎么用photoshop仿制图章工具修改图片?——工具/原料photoshop cs

声明:《KindEditor修改图片上传 kindeditor只上传图片》为网友戏蝶舞分享!如侵犯到您的合法权益请联系我们删除