导读:本期聚焦于小伙伴创作的《ASP.NET百度Ueditor编辑器如何实现上传图片添加水印效果》,敬请观看详情,探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《ASP.NET百度Ueditor编辑器如何实现上传图片添加水印效果》有用,将其分享出去将是对创作者最好的鼓励。

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

ASP.NET百度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方法是否被正确调用,可以在方法中添加日志输出
  • 检查保存路径是否有写入权限,避免因权限问题导致保存失败
  • 检查水印文字是否为空,空文字不会绘制水印

ASP.NETUeditor图片水印上传图片修改时间:2026-06-04 14:57:26

免责声明:​ 已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰,观点力求客观中立。本站旨在免费分享,内容仅供个人学习、研究或参考使用。若引用了第三方作品,版权归原作者所有。如内容涉及您的权益,请联系我们处理。
内容垂直聚焦
专注技术核心技术栏目,确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计,为用户提供无干扰的纯技术知识沉淀,精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进,构建清晰学习路径,帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈,深入技术细节与实践难点。无论是数据库优化还是服务器配置,均结合真实场景与代码示例进行剖析,致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程,从数据库操作到服务器运维,形成完整闭环,一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性,步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目,显著缩短从学习到实践的距离,快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代,紧跟主流技术发展趋势,为用户提供经久不衰的学习价值。