Layui上传组件如何实现上传图片时自动添加日期水印-Layui教程-PHP中文网

水印必须在后端生成，因前端 canvas 受跨域和安全限制无法导出被污染的画布；layui 前端只传原始文件，后端用 imagesharp 或 system.drawing 加时间水印并返回新 url。

水印必须在后端生成，前端 canvas 无法绕过跨域和安全限制

直接在前端用 canvas 给上传前的图片加水印，看似可行，但实际会卡在 failed to execute 'todataurl' on 'htmlcanvaselement': tainted canvases may not be exported 错误上——只要图片来自本地 file 或跨域 url，canvas 就被污染，无法导出 blob 供上传。layui 的 choose 回调里拿到的 file 对象是 blob，不能直接 drawimage；而预览用的 result（base64）又因浏览器策略不支持跨域图片解码为 canvas 图像。所以，水印逻辑必须移交后端。

前端只需传原始文件，不处理水印逻辑

Layui 上传配置保持简洁，避免在 choose 或 before 中尝试 canvas 操作：

auto: true 或 auto: false 都可，但不要在 choose 里调用 obj.preview() 后再试图修改 canvas 内容
accept: 'images' 限定类型，防止非图文件触发后端异常
url 指向真实后端接口（如 /upload/watermark），不要拼接参数干扰 multipart 解析
不需要手动读取 File、转 base64、塞进 canvas —— 这些全是徒劳且易错

.NET MVC 后端接收并添加时间水印的关键点

核心是用 System.Drawing（或更现代的 ImageSharp）在内存中加载图片、绘制文字、保存回流。注意三点：

水印文字建议用拍摄时间（EXIF 中的 DateTimeOriginal）而非服务器当前时间，避免时区/系统时间不准问题；若无 EXIF，则 fallback 到 DateTime.Now
字体必须存在且路径可访问，推荐用绝对路径加载 FontFamily.GenericSansSerif 或嵌入 ttf 字体资源，避免 ArgumentException: FontFamily 异常
输出格式需与原图一致：Jpeg 保持 image/jpeg，Png 保留透明通道，别硬转成 jpg 导致失真

示例关键片段（C#）：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

var image = Image.FromStream(file.InputStream);
using var g = Graphics.FromImage(image);
g.DrawString(DateTime.Now.ToString("yyyy-MM-dd HH:mm"), 
    new Font("Microsoft Sans Serif", 12), 
    Brushes.White, 
    new PointF(image.Width - 120, image.Height - 20));

上传响应必须返回带水印的新文件 URL，而非原图路径

后端处理完水印后，不能直接返回原始文件名或未处理路径。Layui 的 done 回调里拿到的 res 应包含：

url：指向已加水印的图片地址（如 /uploads/202607011806_wm.jpg）
originalName：原始文件名，用于界面展示
不要返回 success: true 这类冗余字段，Layui 不依赖它判断成功

前端 done 中直接用 res.url 更新 img 标签或列表项即可。如果发现页面显示的还是原图，大概率是后端返回了旧路径，或 CDN 缓存了未加水印版本 —— 此时要检查响应头是否含 Cache-Control: no-cache。

水印位置、字体大小、描边颜色这些细节，都在后端绘制阶段决定，前端只管传、收、显。最容易被忽略的是：EXIF 时间提取需要额外 nuget 包（如 MetadataExtractor），且 JPEG 文件头部结构复杂，简单读取 file.InputStream 可能导致流位置偏移，引发图像解析失败。