DFGallery

全屏模式下图片旋转/缩放后，退出全屏图片仍保持变换状态

问题描述：在全屏模式下对图片进行旋转或缩放操作后，退出全屏模式时，灯箱中的图片仍然保持变换后的状态。

解决方案：系统已自动处理此问题，当您退出全屏模式时，图片会自动重置变换状态，恢复到原始大小和方向。无需手动操作。

技术说明：通过监听浏览器的fullscreenchange事件，当检测到退出全屏状态时，自动调用resetImageTransform()函数重置图片变换属性。

图片加载失败或显示不支持的格式

问题描述：画廊中某些图片显示为加载失败状态，或无法正常显示。

可能原因：

• 图片格式不受支持（目前支持JPG、PNG、GIF等常见格式）
• 图片文件损坏或路径不正确
• 直接打开HTML文件时，浏览器的跨域安全限制导致图片无法加载

解决方案：

• 将图片转换为JPG或PNG等常见格式
• 检查图片文件是否完整，路径是否正确
• 如果是跨域问题，尝试使用HTTP服务器方式运行（参考安装和运行部分）

搜索功能不生效或结果不准确

问题描述：使用搜索功能时，没有找到预期的图片，或搜索结果与关键词不匹配。

可能原因：

• 搜索功能仅支持按图片标题搜索
• 图片标题中没有包含搜索关键词
• 搜索关键词输入有误或过于复杂

解决方案：

• 确保搜索关键词与图片标题相关
• 简化搜索关键词，使用更精确的词汇
• 检查图片标题是否正确设置（可在script.js中修改）

灯箱模式下键盘导航失效

问题描述：在灯箱模式下，使用键盘左右箭头无法切换图片，ESC键无法关闭灯箱。

可能原因：

• 灯箱未正确激活，焦点不在灯箱窗口内
• 浏览器或系统的键盘快捷键冲突
• 某些浏览器扩展可能干扰了键盘事件

解决方案：

• 点击灯箱内的图片或控制按钮，确保焦点在灯箱内
• 尝试关闭浏览器扩展或换一个浏览器
• 检查系统快捷键设置，确保没有冲突

在某些浏览器中全屏模式不工作

问题描述：点击全屏按钮后，页面没有进入全屏模式，或全屏功能异常。

可能原因：

• 浏览器不支持Fullscreen API（如某些旧版本浏览器）
• 浏览器或系统的全屏权限被禁用
• 直接打开HTML文件时，浏览器的安全限制禁用了全屏功能

解决方案：

• 使用支持Fullscreen API的现代浏览器（Chrome 15+、Firefox 10+、Safari 5.1+）
• 检查浏览器设置，确保全屏权限已启用
• 尝试使用HTTP服务器方式运行（参考安装和运行部分）

图片EXIF信息显示不正确或不完整

问题描述：图片详情中显示的EXIF信息（如相机型号、拍摄日期等）不正确或缺失。

可能原因：

• 图片本身没有包含EXIF信息（如经过编辑或压缩处理）
• 直接打开HTML文件时，浏览器的跨域安全限制导致无法读取EXIF信息
• 某些图片格式（如PNG）不支持EXIF信息

解决方案：

• 使用包含完整EXIF信息的原始图片
• 尝试使用HTTP服务器方式运行（参考安装和运行部分）
• 对于PNG图片，EXIF信息可能不完整，这是正常现象

项目部署在Cloudflare/腾讯EdgeOne，图片存储在微软OneDrive时出现问题

问题描述：将DFGallery项目部署在Cloudflare存储桶或腾讯EdgeOne存储桶，但图片资源存储在微软OneDrive上，通过OneDrive共享链接加载图片时，出现图片无法显示、EXIF信息无法读取或下载功能失效等问题。

可能原因：

• OneDrive的共享链接不支持跨域资源共享（CORS），阻止了Cloudflare/EdgeOne域名的跨域请求
• OneDrive的共享链接格式可能包含重定向，导致图片无法直接访问
• OneDrive的共享链接可能有访问限制、过期时间或需要登录验证
• Exif.js无法读取跨域OneDrive图片的元数据
• 图片下载功能失效，因为OneDrive链接可能重定向到登录页面而非直接下载
• OneDrive的共享链接格式可能随时变化，导致图片链接失效

解决方案：

1. OneDrive正确的图片分享方式

• 确保使用"公开"或"任何人可查看"的分享权限，而非"仅限特定人员"
• 获取OneDrive图片的直接下载链接，而非默认的分享页面链接
• 转换OneDrive分享链接为直接下载格式：
  • 原始链接：https://1drv.ms/i/s!Axxxxxxxxxxxxxx
  • 转换为直接下载链接：https://1drv.ws/x/s!Axxxxxxxxxxxxxx（将1drv.ms替换为1drv.ws）
  • 或使用：https://api.onedrive.com/v1.0/shares/u!xxx/root/content（需要正确的分享ID）

2. 处理CORS问题

• OneDrive本身不支持自定义CORS配置，因此无法直接允许跨域请求
• 解决方案1：使用CORS代理服务，如：
  • Cloudflare Workers：创建一个简单的Worker作为CORS代理
  • 第三方CORS代理：如cors-anywhere.herokuapp.com（注意安全风险）
  • 自定义后端服务器：部署一个简单的后端服务来代理图片请求
• 解决方案2：将OneDrive图片批量下载后重新上传到与项目同域的存储服务

3. 修改代码适配OneDrive图片

对于图片显示：

• 确保使用正确的OneDrive直接下载链接格式
• 考虑添加图片加载失败的备用方案，如显示默认图片

对于EXIF信息读取：

• 由于OneDrive不支持CORS，Exif.js可能无法直接读取EXIF信息
• 解决方案：在项目中预先存储图片的EXIF信息，或使用服务器端提取后提供API

对于图片下载功能：

• 直接使用OneDrive下载链接可能会失败，因为浏览器的跨域策略限制
• 解决方案1：使用Canvas API将图片绘制到画布上，然后转换为数据URL进行下载
• 解决方案2：使用CORS代理服务获取图片数据，然后提供下载

4. 提高OneDrive图片链接的稳定性

• 避免使用临时共享链接，使用永久共享设置
• 考虑将重要图片备份到与项目同域的存储服务
• 定期检查OneDrive图片链接的有效性
• 使用相对稳定的OneDrive API链接格式，而非简短分享链接

5. 替代方案：使用支持CORS的图片存储服务

• 考虑将图片迁移到支持CORS配置的存储服务，如：
  • Cloudflare R2
  • 腾讯云COS
  • 阿里云OSS
  • Amazon S3
• 这些服务允许自定义CORS规则，与Cloudflare/EdgeOne部署的项目配合更顺畅

注意事项：

• OneDrive的服务条款可能限制商业用途或大量访问，使用前请仔细阅读
• CORS代理服务可能带来安全风险，建议使用自己部署的代理
• OneDrive的API和链接格式可能随时变化，导致图片无法访问
• 考虑使用CDN缓存OneDrive图片，提高访问速度和稳定性