WKWebView 中H5掉摄像头拦截照片进行处理，从新返回给H5方法

Question

如题所述

Answer 1

在 iOS 中使用 WKWebView 加载 H5 页面时，如果需要在 H5 页面中调用设备的摄像头进行拍照或选择照片进行处理，并将处理后的结果返回给 H5 页面，可以通过以下步骤实现：

在 iOS 原生代码中，创建一个与 H5 页面交互的 JavaScript 调用接口。可以使用 WKWebView 的 WKScriptMessageHandler 协议来实现这一接口。例如：
class MyScriptMessageHandler: NSObject, WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if message.name == "takePhoto" {
// 在这里处理拍照逻辑，获取照片并进行处理
let processedImage = processImage()

// 将处理后的结果返回给 H5 页面
let script = "handlePhotoResult('\(processedImage)')"
webView.evaluateJavaScript(script, completionHandler: nil)
}
}
}

在创建 WKWebView 时，设置 WKUserContentController，并将上述的 JavaScript 调用接口添加到其中：
let userContentController = WKUserContentController()
let scriptMessageHandler = MyScriptMessageHandler()
userContentController.add(scriptMessageHandler, name: "takePhoto")

let configuration = WKWebViewConfiguration()
configuration.userContentController = userContentController

let webView = WKWebView(frame: .zero, configuration: configuration)

在 H5 页面中，通过 JavaScript 调用上述的接口来触发拍照或选择照片的操作。例如：
function takePhoto() {
window.webkit.messageHandlers.takePhoto.postMessage(null);
}

function handlePhotoResult(result) {
// 在这里处理从原生代码返回的照片结果
console.log('处理后的照片：', result);
}

在上述代码中，takePhoto 函数用于触发拍照操作，它通过 window.webkit.messageHandlers.takePhoto.postMessage(null) 调用原生代码中的 takePhoto 方法。原生代码中的 processImage 方法用于处理照片，并将处理后的结果通过 handlePhotoResult 函数返回给 H5 页面。

通过以上步骤，你可以在 WKWebView 中实现与 H5 页面的交互，包括拍照或选择照片并将处理结果返回给 H5 页面。请根据实际需求进行适当的调整和处理。

Answer 2

在 iOS 应用程序中使用 WKWebView 加载 H5 页面时，你可以通过与 JavaScript 交互的方式，实现拍摄照片并将处理后的照片返回给 H5 页面。以下是基本的步骤：

创建 WKWebView 并加载 H5 页面：在你的 iOS 应用程序中创建一个 WKWebView 实例，并使用 loadHTMLString 或 loadRequest 方法加载 H5 页面。

JavaScript 与原生代码交互：使用 WKWebView 的 WKScriptMessageHandler 协议，实现 JavaScript 与原生代码的交互。这允许你在 JavaScript 中调用原生代码，并传递数据。

在 H5 页面中调用原生摄像头拍摄照片：在 H5 页面中，通过 JavaScript 代码调用原生代码来触发摄像头的拍摄功能。例如，你可以在 JavaScript 中使用 window.webkit.messageHandlers 对象调用原生代码的方法。

处理原生拍摄的照片：在原生代码中，接收来自 JavaScript 的拍摄请求，并使用相机相关的 API 进行拍摄。拍摄后，你可以对照片进行处理。

将处理后的照片返回给 H5 页面：在原生代码中，使用 WKWebView 的 evaluateJavaScript 方法将处理后的照片数据传递回 H5 页面。你可以将照片数据作为参数传递给 JavaScript 方法，并在 H5 页面中进行显示或进一步处理。

需要注意的是，这个过程涉及到原生代码与 JavaScript 的交互，需要仔细处理数据的传递和类型转换，以确保数据的准确性和完整性。

以上是一个基本的框架，具体实现可能因应用程序的需求和架构而有所不同。你可以根据具体情况，在原生代码和 H5 页面中编写相应的逻辑和代码。

Answer 3

在 iOS 的 WKWebView 中，你可以通过以下步骤拦截摄像头拍摄的照片，并将处理后的结果返回给 H5：

1. 在你的 iOS 应用程序中，确保已经配置了 WKWebView，并加载了相应的 H5 页面。

2. 在你的代码中，实现 WKUIDelegate 的 `webView(_:runJavaScriptAlertPanelWithMessage:initiatedByFrame:completionHandler:)` 方法。这个方法会在 H5 页面调用 `alert()` 函数时触发。

```swift
func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
// 在这里判断是否是拦截照片的 alert
if message == "拦截照片" {
// 进行照片处理
let processedImage = processImage() // 自定义的照片处理方法
let encodedImage = encodeImage(processedImage) // 将图片编码为字符串，以便传递给 H5

// 返回处理后的结果给 H5
let js = "handleProcessedPhoto('\(encodedImage)')" // 调用 H5 页面的处理方法，并传递处理后的照片数据
webView.evaluateJavaScript(js) { _, _ in
completionHandler() // 完成回调
}
}
}
```

3. 在你的 H5 页面中，你需要定义一个名为 `handleProcessedPhoto` 的 JavaScript 函数来处理接收到的照片数据。

```javascript
function handleProcessedPhoto(encodedImage) {
// 在这里处理接收到的照片数据
// ...
}
```

通过以上步骤，你可以在 iOS 的 WKWebView 中拦截摄像头拍摄的照片，进行处理后将结果返回给 H5 页面进行进一步操作。请注意，在代码中的 `processImage()` 和 `encodeImage()` 方法需要根据你的具体需求和实现进行自定义。

Answer 4

在 iOS 中使用 WKWebView 加载 H5 页面时，可以通过 JavaScript 调用 Objective-C 的方法，实现控制拍照并处理照片的功能。具体步骤如下：
1. 在 Objective-C 中定义一个方法，用于控制拍照并处理照片。例如：
```
- (void)takePhotoAndProcess:(void (^)(UIImage *image))completionHandler {
// 调用相机或相册，拍摄或选择照片
// 处理照片，得到处理后的图像 image
UIImage *image = [self processPhoto];
// 将处理后的图像返回给 H5 页面
if (completionHandler) {
completionHandler(image);
}
}
```
2. 在 WKWebView 中注册一个 JavaScript 方法，用于调用 Objective-C 中的方法。例如：
```
- (void)registerPhotoHandler {
NSString *jsCode = @"function takePhotoAndProcess(callback) { \
window.webkit.messageHandlers.photoHandler.postMessage(null); \
window.photoCallback = callback; \
}";
[self.webView evaluateJavaScript:jsCode completionHandler:nil];
}
```
3. 在 WKWebView 中注册一个 JavaScript 消息处理程序，用于接收来自 H5 页面的消息，并调用 Objective-C 中的方法。例如：
```
- (void)registerPhotoMessageHandler {
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"photoHandler"];
}
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.name isEqualToString:@"photoHandler"]) {
[self takePhotoAndProcess:^(UIImage *image) {
NSString *base64String = [UIImagePNGRepresentation(image) base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
NSString *jsCode = [NSString stringWithFormat:@"window.photoCallback('%@')", base64String];
[self.webView evaluateJavaScript:jsCode completionHandler:nil];
}];
}
}
```
4. 在 H5 页面中调用 JavaScript 方法，以触发 Objective-C 中的方法，并获取处理后的图像数据。例如：
```
takePhotoAndProcess(function(base64String) {
// 使用处理后的图像数据进行后续操作
});
```
在上述代码中，使用了 JavaScript 和 Objective-C 之间的消息传递机制，将 H5 页面中的请求传递给了 Objective-C 中的方法，并将处理后的结果返回给了 H5 页面。需要注意的是，在使用相机或相册时，需要获取用户的授权。同时，需要适当处理内存泄漏等问题，以确保代码的稳定性和安全性。

Answer 5

新建UIImagePickerController类
重写他的代理方法
我写demo了，直接看demo

.m的实现原理

具体用法是在WKWebView中的

记得在dealloc中恢复

借鉴博主 https://www.jianshu.com/p/06f1389c3024