CKEditor二次開發-替CKEditor增長添加水印的功能

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

} 好了,到此咱們的二次開發就結束了,,謝謝,本文爲原創,但也在網上學習了不少朋友的知識,再次謝謝你們 ,但願對你們有用。

如下爲運行效果

(添加水印的界面)

(添加水印成功後界面)

相關文章
相關標籤/搜索