C#中基於GDI+(Graphics)圖像處理系列之UEditor上傳圖片自動壓縮優化（添加水印）

前言

UEditor是百度開源的一款非常優秀的富文本編輯器，應用範圍特別地廣，筆者最近幾年做的項目都是用的它，當然不代表它是絕對完美的，也有這樣或者那樣的問題，比如用谷歌瀏覽器上傳圖片時有延遲的情況（並不是所有版本都有，可以參考筆者的另外一篇博文《使用谷歌瀏覽器（chrome）訪問UEditor上傳圖片時文件選擇框延遲彈出的解決方法》），還有一個問題就是上傳圖片的自動壓縮優化的問題。

UEditor在使用多圖片上傳時默認會進行自動壓縮（單圖片上傳是沒有的，不知道爲什麼要這樣設計），可以看看 /ueditor/net/config.json裏的配置，注意下面的imageCompressEnable的值默認爲true，imageCompressBorder限制圖片最長邊長爲1600，即上傳圖片寬或者高大於1600時都會進行等比縮放。

/* 上傳圖片配置項 */
"imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
"imageFieldName": "upfile", /* 提交的圖片表單名稱 */
"imageMaxSize": 2048000, /* 上傳大小限制，單位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
"imageCompressEnable": true, /* 是否壓縮圖片,默認是true */
"imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
"imageInsertAlign": "none", /* 插入的圖片浮動方式 */

在實際業務中，可能存在一種需求，就是隻限制寬，不限制高，例如：商品詳情，往往寬度限制到一值，高度會根據商品實際情況會很長，筆者看了一下js源碼(/ueditor/dialogs/image/image.js)，修改一下是可以滿足這個要求，不過基於下面兩個原因，筆者決定不採用修改js的方法（【js方法】），而採用修改 /ueditor/net/App_Code/UploadHandler.cs的方法(【cs方法】)來解決問題：
（1）【js方法】修改的地方比較多，如果進行版本更新升級比較麻煩，維護起來也費勁，而【cs方法】只需要修改一處；
（2）【js方法】即使修改完成，也只能實現多圖片上傳的壓縮，單圖片還需要另外想辦法，而【cs方法】修改一處就可以將單圖片和多圖片的壓縮優化都實現了。
基於上面兩個原因，筆者向大家介紹【cs方法】是怎樣實現的。

UEditor上傳圖片自動壓縮優化

打開文件/ueditor/net/App_Code/UploadHandler.cs，定位到67行，如下
找到File.WriteAllBytes(localPath, uploadFileBytes);在後面添加用於自動壓縮的代碼，很簡單吧。代碼裏使用的ImageTool圖像工具類是本系列所有文章都要用到的，請到《C#中基於GDI+(Graphics)圖像處理系列之前言》獲取完整代碼。

//下面第一代碼，是原代碼的第67行
var savePath = PathFormatter.Format(uploadFileName,UploadConfig.PathFormat);
var localPath = Server.MapPath(savePath);
try
{
    if (!Directory.Exists(Path.GetDirectoryName(localPath)))
    {
                Directory.CreateDirectory(Path.GetDirectoryName(localPath));
    }
    File.WriteAllBytes(localPath, uploadFileBytes);
    //加入自動壓縮優化的代碼           
    var error=string.Empty;
    //這裏傳入的參數680（限制最大寬度）、0（不限制高）、93（圖片質量）實際中應該是放到配置文件裏
    if (!new SDLight.Util.ImageTool().GetCompressImage(localPath, localPath, 680, 0, 93, out error))
    {                
         //請用日誌記錄壓縮失敗的原因（當圖片不需要壓縮優化時也認爲是壓縮失敗）
    }            
    //自動壓縮優化代碼結束
    Result.Url = savePath;
    Result.State = UploadState.Success;
}
catch (Exception e)
{
     Result.State = UploadState.FileAccessError;
     Result.ErrorMessage = e.Message;
}
finally
{
    WriteResult();
}

加入很簡單的代碼就可以實現單圖片和多圖片進行圖片上傳時自動壓縮（限制寬或者高），筆者所提供的圖像處理工具類還具有生成高質量縮略圖、添加文字或者圖片水印等功能，在上面代碼同一位置添加一句代碼就可以實現相應的功能，下面演示添加水印

UEditor上傳圖片添加水印

就在上面代碼的同一位置，使用筆者所提供的圖像處理工具類中的添加圖片水印的方法，很簡單，本來不想囉嗦的。

//下面第一代碼，是原代碼的第67行
var savePath = PathFormatter.Format(uploadFileName,UploadConfig.PathFormat);
var localPath = Server.MapPath(savePath);
try
{
    if (!Directory.Exists(Path.GetDirectoryName(localPath)))
    {
                Directory.CreateDirectory(Path.GetDirectoryName(localPath));
    }
    File.WriteAllBytes(localPath, uploadFileBytes);
    //加入添加水印的代碼           
    var error=string.Empty;
    //waterImgPath爲水印小圖片完整物理路徑
    string waterImgPath = "d:\\water.jpg";
    if (!new SDLight.Util.ImageTool().DrawWaterImage(localPath, localPath, waterImgPath, 9, 10, 93, 50, 0, out error))
    {
         //請用日誌記錄添加水印失敗的原因
    }            
    //添加水印的代碼結束
    Result.Url = savePath;
    Result.State = UploadState.Success;
}
catch (Exception e)
{
     Result.State = UploadState.FileAccessError;
     Result.ErrorMessage = e.Message;
}
finally
{
    WriteResult();
}

如果想查閱本系列其他文章，請移步《C#中基於GDI+(Graphics)圖像處理系列之前言》