圖文詳解ASP.NET百度Ueditor編輯器實現上傳圖片添加浮水印效果執行個體

這篇文章主要給大家介紹了ASP.NET百度Ueditor編輯器1.4.3這個版本實現上傳圖片添加浮水印效果的相關資料，文中通過圖文及範例程式碼介紹的非常詳細，相信對大傢具有一定的參考價值，需要的朋友們下面來一起看看吧。

前言

最近工作中遇到一個需求，是要實現asp.net百度ueditor圖片上傳添加浮水印的功能，通過尋找相關的資料終於實現了，下面來給大家分享下實現的效果，文末給出了執行個體代碼，大家可以參考學習，下面來一起學習學習吧。

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

準備

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

修改介面

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

由此可以知道，我們應該到image.html 這個檔案去修改我們的html代碼，在 image.html檔案的第36行開始添加幾行html代碼，如：

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

尋找可行的辦法

開啟FireBug，選中控制台，我們上傳一張圖片，看一下請求資訊：

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

前台傳過來的參數action 參數值為uploadimage ，類action 由衍生類別 UploadHandler進行執行個體化，UploadHandler 又通過建構函式注入 UploadConfig類的執行個體，最後由action.Process()調用：

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

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

有人很快就反應過來了：我們可以從前台請求controller.ashx 時將帶有是否要加浮水印的"字串"一併傳遞到後台，後台通過判斷就可以做出相應的處理了！

實現

1. 先找到請求controller.ashx 時，參數是從哪裡添加上去的，js基礎比較好的同學應該不難找到：

我們給他添加參數：“是否加浮水印”

2. 後台擷取參數並進行判斷是否要加浮水印

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

上傳一張圖片看看：