C#中基于GDI+(Graphics)图像处理系列之UEditor上传图片自动压缩优化（添加水印）

末蓝、 2021-09-11 06:04 418阅读 0赞

# 前言 #

UEditor是百度开源的一款非常优秀的富文本编辑器，应用范围特别地广，笔者最近几年做的项目都是用的它，当然不代表它是绝对完美的，也有这样或者那样的问题，比如用谷歌浏览器上传图片时有延迟的情况（并不是所有版本都有，可以参考笔者的另外一篇博文[《使用谷歌浏览器（chrome）访问UEditor上传图片时文件选择框延迟弹出的解决方法》][chrome_UEditor]），还有一个问题就是上传图片的自动压缩优化的问题。  
![这里写图片描述][SouthEast]  
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)图像处理系列之前言》][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)图像处理系列之前言》][C_GDI_Graphics]

[chrome_UEditor]: http://blog.csdn.net/lhtzbj12/article/details/53673601
[SouthEast]: /images/20210809/92b6b5b9d04444d4ae84769219b193f8.png
[C_GDI_Graphics]: http://blog.csdn.net/lhtzbj12/article/details/54024821