改造Kindeditor之：自定义图片上传插件。 外加给图片增加水印效果的选择。

场景： 编辑部人士编辑文章时需要在文章中上传图片。但上传图片时需要增加是否增加水印的选择（有可能是自己公司的原创作品）。所以需要改造Kindeditor .

1: 删除Kindeitor 默认的参数对象里的Image  添加自定bareheadimage

有原来的

items : [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
],

变成

items : [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|',  'multiimage','bareheadimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
],

复制 kindeditor 下的image文件为 bareheadimage 并把里面的image.js 改名为bareheadimage.js 此文件下的也需要修改一下之处：

KindEditor.plugin('bareheadimage', function(K) {
var self = this, name = 'bareheadimage',
allowImageUpload = K.undef(self.allowImageUpload, true),
formatUploadUrl = K.undef(self.formatUploadUrl, true),
allowFileManager = K.undef(self.allowFileManager, false),
//uploadJson = K.undef(self.uploadJson, self.basePath + 'jsp/image_upload_watermark.jsp'),
uploadJson = this.basePath + "jsp/image_upload_watermark.jsp",  //后台处理的JSP  复制upload_json.jsp后进行了相应的修改。下面会说到

下面定义生成的HTML代码也要修改：

'<form id="local_image_upload" class="ke-upload-area ke-form" method="post" enctype="multipart/form-data" target="' + target + '" action="' + K.addParam(uploadJson, 'dir=image') +  '">',
//file
'<div class="ke-dialog-row">',
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 + '" /><br/>',
'<label style="width:60px;">' + lang.isWatermark + '</label>',  
'<select name="picture_watermark" id="picture_watermark" οnchange="changeActionIsWatermark()"><option value="0">&nbsp;&nbsp;不加</option><option value="1">&nbsp;&nbsp;&nbsp;加</option></select>',
'</div>',

追加相应的更改action中参数的函数：到文件末尾：

function changeActionIsWatermark()
{
var isWatermark = $('#picture_watermark').val();
var of = $('#local_image_upload').attr('action');
if(of.indexOf('isWatermark') == -1)
{
of = of + '&isWatermark=' + isWatermark; 
}else
{
of = of.substr(0,of.length-1) + isWatermark;
}
$('#local_image_upload').attr('action',of);
}

其中：lang.isWatermark ： 需要在lang文件下的zh_CN.js下增加：

'bareheadimage.remoteImage' : '网络图片',
'bareheadimage.localImage' : '本地上传',
'bareheadimage.remoteUrl' : '图片地址',
'bareheadimage.localUrl' : '上传文件',
'bareheadimage.isWatermark' : '是否水印',
'bareheadimage.size' : '图片大小',
'bareheadimage.width' : '宽',
'bareheadimage.height' : '高',
'bareheadimage.resetSize' : '重置大小',
'bareheadimage.align' : '对齐方式',
'bareheadimage.defaultAlign' : '默认方式',
'bareheadimage.leftAlign' : '左对齐',
'bareheadimage.rightAlign' : '右对齐',
'bareheadimage.imgTitle' : '图片说明',
'bareheadimage.upload' : '浏览...',
'bareheadimage.viewServer' : '图片空间',

2： 复制 upload_json.jsp 为image_upload_watermark.jsp

并增加以下代码：

String isWatermark = request.getParameter("isWatermark");

if(isWatermark!=null && isWatermark.equals("1"))
{
//加水印
ImageUtils.pressText("bareheadzzq", savePath + "/" + newImgName, "宋体",Font.ITALIC, 0, 10, 30, 0);
}
//发送给 KE  
JSONObject obj = new JSONObject();        //在成功返回之前增加

ImageUtils中自己写的增加文字水印的方法：

public static int pressText(String pressText, String targetImg,
String fontName, int fontStyle, int color, int fontSize, int x,
int y) {
try {
File _file = new File(targetImg);
Image src = ImageIO.read(_file);
int wideth = src.getWidth(null);
int height = src.getHeight(null);
BufferedImage image = new BufferedImage(wideth, height,
BufferedImage.TYPE_INT_RGB);
Graphics g = image.createGraphics();
g.drawImage(src, 0, 0, wideth, height, null);
g.setColor(Color.RED);
g.setFont(new Font(fontName, fontStyle, fontSize));
g.drawString(pressText, wideth - fontSize - x, height - fontSize
/ 2 - y);
g.dispose();
FileOutputStream out = new FileOutputStream(targetImg);
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
encoder.encode(image);
out.close();
} catch (Exception e) {
logger.error("加水印出现错误:" + e.getMessage(), e);
return -1;
}
return 1;
}

选择 加于不加水印的效果如下：

在调用的JSP中这么定义下。能够给编辑器中的按钮增加相应的提示

KindEditor.lang({
bareheadimage : '插入图片+barehead'
});

最后

以上就是等待奇迹为你收集整理的改造Kindeditor之：自定义图片上传插件。 外加给图片增加水印效果的选择。的全部内容，希望文章能够帮你解决改造Kindeditor之：自定义图片上传插件。 外加给图片增加水印效果的选择。所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。