iOS WKWebView上传图片/视频时画质严重受损问题求助

核心原因 #

WKWebView 对 <input type="file"> 选择的图片/视频默认会进行高比例压缩，以此减少数据传输量，但这会导致上传后画质严重下降；而移动 Safari 不会做这个默认压缩，因此能保留原始画质。

解决方法 #

通过自定义文件选择流程，绕过 WKWebView 的默认压缩逻辑，直接获取原始质量的媒体文件：

1. 给 WKWebView 设置 UIDelegate
   确保你的 WKWebView 实例设置了 uiDelegate，并实现 WKUIDelegate 协议中的文件选择代理方法：

   func webView(_ webView: WKWebView, runOpenPanelWithParameters parameters: WKOpenPanelParameters, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping ([URL]?) -> Void) {
       // 仅处理图片/视频选择请求
       guard parameters.acceptedTypes.contains(where: { $0.starts(with: "image/") || $0.starts(with: "video/") }) else {
           completionHandler(nil)
           return
       }
   
       // 使用 PHPickerViewController（iOS 14+）选择媒体
       let pickerConfiguration = PHPickerConfiguration()
       pickerConfiguration.filter = .any(of: [.images, .videos])
       pickerConfiguration.selectionLimit = parameters.allowsMultipleSelection ? 0 : 1
       
       let picker = PHPickerViewController(configuration: pickerConfiguration)
       picker.delegate = self
       // 假设当前控制器是 WKWebView 的容器控制器
       self.present(picker, animated: true)
       
       // 保存回调闭包，用于选择完成后通知网页
       self.openPanelCompletionHandler = completionHandler
   }
   

2. 处理媒体选择结果
   实现 PHPickerViewControllerDelegate 协议，获取原始媒体文件的 URL 并传给 WKWebView：

   func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
       picker.dismiss(animated: true)
       
       var selectedURLs: [URL] = []
       let group = DispatchGroup()
       
       for result in results {
           group.enter()
           guard result.itemProvider.canLoadObject(ofClass: URL.self) else {
               group.leave()
               continue
           }
           result.itemProvider.loadObject(ofClass: URL.self) { object, error in
               defer { group.leave() }
               guard let url = object as? URL, error == nil else { return }
               selectedURLs.append(url)
           }
       }
       
       group.notify(queue: .main) { [weak self] in
           self?.openPanelCompletionHandler?(selectedURLs.isEmpty ? nil : selectedURLs)
       }
       
       // 处理空选择
       if results.isEmpty {
           openPanelCompletionHandler?(nil)
       }
   }
   

3. 兼容低版本 iOS
   如果需要支持 iOS 14 以下系统，替换为 UIImagePickerController：

   • 图片选择时取 originalImage，将其保存到临时目录生成 URL；
   • 视频选择时直接取 mediaURL，再传给 WKWebView 的回调闭包。

额外注意事项 #

• 确保在 Info.plist 中添加照片库、相机的权限描述，比如 NSPhotoLibraryUsageDescription、NSCameraUsageDescription；
• 临时文件使用完成后记得清理，避免占用存储空间。

内容的提问来源于stack exchange，提问作者Dibz