圖文詳解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. 後台取得參數並進行判斷是否要加浮水印

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

上傳一張圖片看看：

############################# ##########

以上是圖文詳解ASP.NET百度Ueditor編輯器實作上傳圖片新增浮水印效果實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！