CKEditor二次開發----爲CKEditor增長添加水印的功能javascript
在CKEditor上增長添加水印的功能,相信你們都沒有見過。html
CKEditor的前身就是FCKEditor,FCKEditor自3.0後就改稱爲CKEditor。java
話很少說,,咱們開始吧,,apache
首先,修改對CKEditor引入的那部分javascript,代碼以下:session
<script type="text/javascript"> CKEDITOR.replace('content',addWaterMarkButton(this)); function addWaterMarkButton(editor){ CKEDITOR.on('dialogDefinition', function( ev ){ var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; if ( dialogName == 'image' ){ var infoTab = dialogDefinition.getContents( 'info' ); infoTab.add({ type : 'button', id : 'upload_image', align : 'center', label : '添加水印', onClick : function( evt ){ var thisDialog = this.getDialog(); var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl'); var txtUrlId = txtUrlObj.getInputElement().$.id; addWaterMark(txtUrlId); } }, 'browse'); //place front of the browser button } }); } function addWaterMark(theURLElementId){ var watermark = "myCkeditor/watermark.jsp"; //這是我本身的處理文件/圖片上傳的頁面URL var imgUrl = window.showModalDialog(watermark,null,"dialogWidth:360px;dialogHeight:120px;help:no;status:no"); var urlObj = document.getElementById(theURLElementId); urlObj.value = imgUrl; urlObj.fireEvent("onchange"); //觸發url文本框的onchange事件,以便預覽圖片 } </script>jsp
以上的部分,我想對於瞭解CKEditor的朋友必定很是熟悉了,,我也就很少說了,post
完成這個之後,咱們能夠作一個上傳頁面,如上代碼"myCkeditor/watermark.jsp"; //這是我本身的處理文件/圖片上傳的頁面URL學習
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <%@taglib uri="/struts-tags" prefix="s"%> <% String image= (String)request.getParameter("image"); %>this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">url
<html> <head> <title>添加水印</title> </head> <body> <iframe name="smz" width="0" height="0" frameborder="0" style="display: none"></iframe> <font color="red"><s:property value="#request.errorMessage" /> </font> <form action="watermark" method="post" enctype="multipart/form-data" name="watermark" target="smz"> <% if(image!=null) { out.print("原文件:<img src='.."+image+"'/>"); out.print("<input type='hidden' name='sourceimage' value='"+image+"'/><br>"); } else { out.print("原文件:<input type='file' name='sourcefile' class='button'><br>"); } %> 水印: <input type="file" name="markfile" class="button"><br> 文字: <input type="text" name="text" size="24"class="button"><br> 文字色彩: <select name="textcolor"> <option value='red'>紅色</option> <option value='pink'>粉紅</option> <option value='gray'>灰色</option> <option value='blue'>藍色</option> <option value='green'>綠色</option> <option value='black'>黑色</option> </select> <br> <input type="submit" name="submit" value="執行" class="button"> </form> <input type="hidden" name="pagePath" id="_page_path" value="<%String p=(String)session.getAttribute("pagePath");if(p!=null)out.print(p);session.removeAttribute("pagePath"); %>" /> <script type="text/javascript"> var _page_path = document.getElementById("_page_path").value; if(null!=_page_path && ""!=_page_path){
//alert(_page_path); window.returnValue=_page_path; window.close(); } </script> </body>
</html>
再接下來,咱們就要作Action,即如上所示的<form action="watermark" method="post" enctype="multipart/form-data"
name="watermark" target="smz">
package com.burning.EasyCMS.myCkeditor;
import java.awt.Color; import java.awt.Graphics2D; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.InputStream; import java.io.OutputStream; import java.util.Date;
import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import javax.swing.ImageIcon;
import org.apache.struts2.ServletActionContext;
import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGEncodeParam; import com.sun.image.codec.jpeg.JPEGImageEncoder;
public class WaterMark { private static int wid = 0; private static int het = 0; private static final long serialVersionUID = 572146812454l; private static final int BUFFER_SIZE = 16 * 1024;
private File sourcefile; private String sourceimage; private File markfile; private String text; private String textcolor; public static boolean createMark(String filePath, String watermark, String text, String savePath, Color color) { ImageIcon imgIcon = new ImageIcon(filePath); Image theImg = imgIcon.getImage(); ImageIcon waterIcon = new ImageIcon(watermark); Image waterImg = waterIcon.getImage(); if (watermark != null && !watermark.equals("")) { ImageIcon markIcon = new ImageIcon(watermark); Image markImg = markIcon.getImage(); wid = markImg.getWidth(null); het = markImg.getHeight(null); } int width = theImg.getWidth(null); int height = theImg.getHeight(null); BufferedImage bimage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics2D g = bimage.createGraphics(); g.setColor(color); g.setBackground(Color.white); g.drawImage(theImg, 0, 0, null); g.drawImage(waterImg, width - wid, height - het, null); g.drawString(text, width - 120, height - 12); try { FileOutputStream out = new FileOutputStream(savePath); JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out); JPEGEncodeParam param = encoder.getDefaultJPEGEncodeParam(bimage); param.setQuality(50f, true); encoder.encode(bimage, param); out.close(); } catch (Exception e) { e.printStackTrace(); System.out.println("水印失敗"); return false; } finally { System.gc(); } System.out.println("水印成功"); return true; } private static void copy(File src, File dst) { try { InputStream in = null; OutputStream out = null; try { in = new BufferedInputStream(new FileInputStream(src), BUFFER_SIZE); out = new BufferedOutputStream(new FileOutputStream(dst), BUFFER_SIZE); byte[] buffer = new byte[BUFFER_SIZE]; while (in.read(buffer) > 0) { out.write(buffer); } } finally { if (null != in) { in.close(); } if (null != out) { out.close(); } } } catch (Exception e) { e.printStackTrace(); } } public Color makeColor(String color) { Color c = null; if (color == null) { c = Color.black; } else if (color.equals("red")) { c = Color.red; } else if (color.equals("blue")) { c = Color.blue; } else if (color.equals("green")) { c = Color.green; } else if (color.equals("gray")) { c = Color.gray; } else if (color.equals("green")) { c = Color.green; } else if (color.equals("pink")) { c = Color.pink; } else { c = Color.black; } return c; } public String watermark() { HttpServletRequest request = ServletActionContext.getRequest(); HttpSession session = request.getSession(); try { String mark = null; String source = null; String serverPath = ServletActionContext.getServletContext() .getRealPath("\\"); if (sourcefile != null) { String fileName = new Date().getTime() + "1.jpg"; String path = serverPath + "upload\\image\\"; File imageFile = new File(path + fileName); copy(sourcefile, imageFile); source = path + fileName; } else { source = serverPath + sourceimage; } if (markfile != null) { String fileName2 = new Date().getTime() + "2.jpg"; String path = serverPath + "upload\\image\\"; File imageFile2 = new File(path + fileName2); copy(markfile, imageFile2); mark = path + fileName2; } else { mark = serverPath + "myCkeditor\\transparent.gif"; } Color c = makeColor(textcolor); if (text == null) text = ""; String fileName = new Date().getTime() + ".jpg"; String savepath = serverPath + "upload\\image\\" + fileName; System.out.println("source:"+source); System.out.println("mark:"+mark); System.out.println("text:"+text); System.out.println("savepath:"+savepath); if (createMark(source, mark, text, savepath, c)) { session.setAttribute("pagePath", "upload\\image\\" + fileName); return "success"; } else return "fail"; } catch (Exception e) { request.setAttribute("errorMessage", "圖片上傳未成功"); return "fail"; } } public File getSourcefile() { return sourcefile; } public void setSourcefile(File sourcefile) { this.sourcefile = sourcefile; } public String getSourceimage() { return sourceimage; } public void setSourceimage(String sourceimage) { this.sourceimage = sourceimage; } public File getMarkfile() { return markfile; } public void setMarkfile(File markfile) { this.markfile = markfile; } public String getText() { return text; } public void setText(String text) { this.text = text; } public String getTextcolor() { return textcolor; } public void setTextcolor(String textcolor) { this.textcolor = textcolor; }
} 好了,到此咱們的二次開發就結束了,,謝謝,本文爲原創,但也在網上學習了不少朋友的知識,再次謝謝你們 ,但願對你們有用。
如下爲運行效果
(添加水印的界面)
(添加水印成功後界面)