在ASP.NET项目中使用百度Ueditor编辑器时,很多场景下需要给上传的图片自动添加水印,这样既可以对图片版权进行保护,也能起到品牌宣传的作用。实现这个功能不需要修改Ueditor的前端核心代码,只需要调整后端的上传处理逻辑即可。

实现原理说明
Ueditor的图片上传请求会发送到后端指定的处理接口,默认情况下后端只需要把上传的文件保存到服务器指定路径并返回对应的访问地址即可。要实现添加水印的效果,我们只需要在文件保存之前,先对上传的图片流进行处理,把水印内容绘制到图片上,再将处理后的图片保存到服务器,最终返回保存后的图片地址。
环境准备
首先需要确保项目中已经正确集成了Ueditor编辑器,并且图片上传功能可以正常使用。本文基于.NET Framework 4.5版本开发,使用C#作为后端开发语言,Ueditor版本为1.4.3.3。你需要提前准备好水印图片,水印内容可以是文字或者图片,本文以文字水印为例进行说明。
修改Ueditor后端上传处理类
Ueditor的.NET版本后端处理逻辑通常在App_Code/UploadHandler.cs文件中,我们需要找到处理图片上传的方法,在保存文件之前加入水印处理代码。
原始上传保存代码
默认的图片保存逻辑如下:
// 原始保存代码
private void SaveFile(HttpPostedFile file, string path)
{
// 确保目录存在
string dir = Path.GetDirectoryName(path);
if (!Directory.Exists(dir))
{
Directory.CreateDirectory(dir);
}
// 保存文件
file.SaveAs(path);
}添加水印处理的方法
我们新增一个处理图片加水印的方法,接收原始图片流和水印文字,返回添加水印后的图片流:
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
/// <summary>
/// 给图片添加文字水印
/// </summary>
/// <param name="originalStream">原始图片流</param>
/// <param name="waterText">水印文字</param>
/// <param name="savePath">保存路径</param>
private void AddTextWaterMark(Stream originalStream, string waterText, string savePath)
{
// 从流中加载原始图片
Image originalImage = Image.FromStream(originalStream);
// 创建画布
using (Graphics g = Graphics.FromImage(originalImage))
{
// 设置水印文字字体
Font font = new Font("微软雅黑", 20, FontStyle.Bold);
// 设置水印文字颜色,半透明黑色
Brush brush = new SolidBrush(Color.FromArgb(128, 0, 0, 0));
// 计算水印位置,放在右下角,距离边缘10像素
SizeF textSize = g.MeasureString(waterText, font);
float x = originalImage.Width - textSize.Width - 10;
float y = originalImage.Height - textSize.Height - 10;
// 绘制水印文字
g.DrawString(waterText, font, brush, new PointF(x, y));
// 释放资源
font.Dispose();
brush.Dispose();
}
// 确保保存目录存在
string dir = Path.GetDirectoryName(savePath);
if (!Directory.Exists(dir))
{
Directory.CreateDirectory(dir);
}
// 保存处理后的图片
originalImage.Save(savePath, ImageFormat.Jpeg);
originalImage.Dispose();
}修改上传保存逻辑
接下来修改原有的SaveFile方法,调用上面的水印处理方法:
private void SaveFile(HttpPostedFile file, string path)
{
// 只处理图片类型的水印添加,非图片文件直接保存
string fileExt = Path.GetExtension(file.FileName).ToLower();
string[] allowImgExt = { ".jpg", ".jpeg", ".png", ".gif", ".bmp" };
if (Array.IndexOf(allowImgExt, fileExt) >= 0)
{
// 图片文件,添加水印
// 水印文字可以根据需要修改,也可以从配置文件中读取
string waterText = "我的网站版权所有";
AddTextWaterMark(file.InputStream, waterText, path);
}
else
{
// 非图片文件直接保存
string dir = Path.GetDirectoryName(path);
if (!Directory.Exists(dir))
{
Directory.CreateDirectory(dir);
}
file.SaveAs(path);
}
}配置Ueditor上传路径
需要确保Ueditor的配置文件ueditor.config.js中的图片上传地址正确指向我们的后端处理接口,默认配置如下:
// 图片上传配置项
,imageActionName: "uploadimage" /* 执行上传图片的action名称 */
,imageFieldName: "upfile" /* 提交的图片表单名称 */
,imageMaxSize: 2048000 /* 上传大小限制,单位B */
,imageAllowFiles: [".png", ".jpg", ".jpeg", ".gif", ".bmp"] /* 上传图片格式显示 */
,imageCompressEnable: true /* 是否压缩图片,默认是true */
,imageCompressBorder: 1600 /* 图片压缩最长边限制 */
,imageInsertAlign: "none" /* 插入的图片浮动方式 */
,imageUrlPrefix: "" /* 图片访问路径前缀 */
,imagePathFormat: "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}" /* 上传保存路径,可以自定义保存路径和文件名格式 */如果没有特殊需求,保持默认配置即可,后端处理逻辑已经可以正确接收上传的图片请求。
功能测试
完成上述代码修改后,重新编译ASP.NET项目,进入Ueditor编辑器页面,点击图片上传按钮,选择一张本地图片上传,上传完成后插入到编辑器中,可以看到图片右下角已经出现了我们设置的水印文字。如果需要调整水印的字体、颜色、位置,只需要修改AddTextWaterMark方法中的对应参数即可。
注意事项
- 如果服务器没有安装System.Drawing相关的依赖,可能会报错,需要确保服务器环境支持GDI+绘图
- 水印文字的字体需要服务器上存在,否则会使用默认字体替代
- 如果是多图片上传,上述逻辑同样适用,不需要额外修改
- 如果需要添加图片水印,只需要将绘制文字的代码替换为绘制图片的代码即可,逻辑类似
常见问题排查
如果上传后图片没有水印,可以按照以下步骤排查:
- 检查上传的文件是否是图片格式,非图片格式不会添加水印
- 检查
AddTextWaterMark方法是否被正确调用,可以在方法中添加日志输出 - 检查保存路径是否有写入权限,避免因权限问题导致保存失败
- 检查水印文字是否为空,空文字不会绘制水印