ASP.NET Ueditor上傳圖片新增水印

青蛙醬發表於2015-04-04

首先來一張我們想要的功能介面,如果發覺這種效果不是你想要的,後面的內容就不用看了。


準備 

從官網下載的Ueditor壓縮包,我下載的是ueditor1_4_3-utf8-net 這個版本,下面的介紹是對這個版本而言的。

修改介面

先找到我們要新增"加水印[checkbox]"的地方


 

由此可以知道,我們應該到image.html 這個檔案去修改我們的html程式碼,在 image.html檔案的第36行開始新增幾行html程式碼,如下圖:

 

重新整理介面,單擊多圖上傳>本地上傳,介面就變成這樣了:

 

 

尋找可行的辦法

開啟FireBug,選中控制檯,我們上傳一張圖片,看一下請求資訊:

 


 

這裡可以看到,圖片的上傳是由controller.ashx 來處理的,而且有請求的引數:action 和 encode 。那我們再來看一下controller.ashx 具體是怎麼處理的:

 

 

前臺傳過來的引數action 引數值為uploadimage ,類Hander 由派生類 UploadHandler進行例項化,UploadHandler 又通過建構函式注入 UploadConfig類的例項,最後由action.Process()呼叫:

 

其中File.WriteAllBytes 即為儲存圖片的方法。

 

上面就是圖片上傳中"本地上傳"的主要處理程式碼。現在思考一下,我們要給圖片加水印,應該怎麼去做呢?

我們可以從前臺請求controller.ashx 時將帶有是否要加水印的"字串"一併傳遞到後臺,後臺通過判斷就可以做出相應的處理了!

 

實現

1. 先找到請求controller.ashx 時,引數是從哪裡新增上去的,js基礎比較好的話應該不難找到:

 

 

我們給他新增引數:“是否加水印”

 

 

2. 後臺獲取引數並進行判斷是否要加水印

 


 

 

好了,這樣就大功告成了~

 

上傳一張圖片看看:

 

 

其他

水印圖片的處理,我是直接從網上下載的圖片處理類:

http://www.cnblogs.com/amylis_chen/p/3403072.html

 

本例下載地址:

http://download.csdn.net/detail/somethingwhat/8562755 (這個有BUG,不要下載)

http://download.csdn.net/detail/somethingwhat/9666258 (2016-10-28更新)

相關文章