Layui上传组件前端加水印必然失败，因file://协议下canvas被污染导致toDataURL报错；必须由后端接收原始文件并添加水印，前端仅需配置url指向后端接口、accept过滤图片类型，预览应使用后端返回的带水印URL。
Layui 上传组件里用 canvas 加水印会直接报错，这事没法在前端硬刚 —— 水印必须交给后端做。
为什么 toDataURL 在 Layui 的 choose 回调里必然失败
你在 layui.upload 的 choose 回调中拿到 obj.files[0]（一个 File 对象），然后试图用 URL.createObjectURL 创建地址、再用 new Image() 加载、再 drawImage 到 canvas、最后调用 toDataURL —— 这套流程在本地开发时可能“看起来”跑通，但只要图片来自本地文件（file:// 协议）或跨域资源，canvas 就会被浏览器标记为 tainted。
- 浏览器对
file://协议默认禁用 CORS，img.crossOrigin = 'anonymous'完全无效 -
File对象本身无法设置crossOrigin，它不是网络资源，而是受沙箱保护的本地引用 - 即使你绕过预览、直接读取
File为ArrayBuffer再用createImageBitmap，依然无法规避 canvas 污染限制（该 API 同样拒绝 tainted 源）
别试了：Layui 前端加水印的常见徒劳操作
这些写法看似合理，实则全都会卡在 toDataURL 报错上，且毫无例外：
- 在
choose里调用obj.preview()后，立刻对生成的img元素设crossOrigin="anonymous"——preview用的是URL.createObjectURL，不是真实 URL，设了也白设 - 手动用
FileReader读File→ 转base64→new Image().src = base64→ 绘制 →toDataURL—— base64 图片虽同源，但 Layui 默认不支持传 base64 到upload接口，multipart 表单要求原始二进制流 - 用
canvas.toBlob替代toDataURL—— 错误一样，tainted canvas 禁止所有导出操作
真正能落地的方案：只传原始文件，水印逻辑彻底后移
前端唯一要做的，就是把用户选中的图片原封不动交给后端，由后端完成加载、加时间水印、保存并返回新 URL。Layui 配置只需保持干净：
-
url: '/api/upload/watermark'—— 指向真实接收 multipart 的接口，不要拼 query 参数（如?t=123），会干扰后端解析 -
accept: 'images'—— 提前过滤非图文件，避免后端解析异常 -
auto: true或false都可，但绝对不要在before或choose中尝试任何 canvas 操作 - 后端收到文件后，用
ImageSharp（推荐）或System.Drawing加水印：优先读 EXIF 的DateTimeOriginal，无则 fallback 到DateTime.Now；字体用FontFamily.GenericSansSerif避免路径问题；输出格式严格匹配原图（image/jpeg/image/png）
最容易被忽略的一点：很多人以为只要后端加了水印就万事大吉，但若前端仍试图在上传前预览“带水印的图”，就会再次触发 canvas 污染 —— 实际上，预览应该用后端返回的新 URL（已带水印），而不是拿原始文件再画一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
