Layui图片预览需手动加CSS约束防变形：img设max-width:100%;height:auto，容器设固定宽高或overflow:hidden；避免width/height全100%导致等比失效。
预览图宽高没设，直接塞进 img 标签就变形
layui 的 preview 回调返回的是 base64 数据 url，你把它直接赋给 img.src，但没控制 img 自身样式，浏览器会按原始尺寸渲染——比如一张 4000×3000 的图，撑满容器后必然拉伸或溢出。
必须手动加 css 约束：
• 给预览 img 加 max-width: 100%; height: auto;
• 容器（如 #preview-box）设固定宽高或 overflow: hidden
• 避免用 width: 100%; height: 100%，这会强制等比压缩失效
obj.preview() 返回的 base64 图太大，加载卡顿还触发布局抖动
用户选一张 8MB 的 PNG，FileReader.readAsDataURL() 读取慢、主线程阻塞、生成的 base64 字符串超长，插入 DOM 后重排重绘明显。
这不是 layui 的锅，是前端处理大图的通病：
• 在 choose 回调里别直接调 obj.preview()，先用 canvas 压缩再转 dataURL
• 限制输出尺寸，比如统一缩到宽度 ≤ 800px，质量 0.8
• 对超大文件（>5MB）提前拦截，提示“请上传 ≤5MB 的图片”
后端返回的缩略图地址带 query 参数，导致缓存失效或 CORS 跨域失败
有些后端接口返回类似 /api/file/123.jpg?ts=1719755160 这种带时间戳的 URL，每次都不一样，浏览器无法复用缓存；如果没配好跨域头，img 标签加载时静默失败，控制台只显示 net::ERR_FAILED。
检查点：
• 后端是否对缩略图路径做了缓存控制（Cache-Control: public, max-age=31536000）
• 是否返回了 Access-Control-Allow-Origin: * 或具体域名
• 前端拼 URL 时别手误多加斜杠，比如 location.origin + '/upload/' + res.data.url 里 res.data.url 已含开头斜杠，结果变成 //upload//abc.jpg
移动端 Safari 下预览图模糊、边缘发虚
这是 WebKit 渲染特性：未指定 devicePixelRatio 适配时，canvas 绘制的图片在 Retina 屏上默认按 1x 渲染，再被放大到 2x 显示，自然糊。
修复方法很简单：
• 创建 canvas 时，把宽高乘以 window.devicePixelRatio
• 设置 canvas.style.width 和 canvas.style.height 为逻辑像素值（即除以 dpr）
• drawImage 时坐标和尺寸也按 dpr 缩放
不这么做，哪怕你压缩得再精细，iOS 用户看到的仍是毛边图
