如何从 webview 使用 UIImagePickerController

Question

我正在在线学习本教程 https://makeapppie.com/2016/06/28/how-to-use-uiimagepickercontroller-for-a-camera-and-photo-library-in-swift-3-0/（稍作改动）。我正在尝试从网络视图调用我的 UIImagePickerController，但我不确定如何更改代码以使其正常工作。不同之处在于，我将收到来自 javascript 的呼叫，然后作为结果调用选择器，而不是使用 UIButton。然后我想使用我的 javascript 接口将图像作为 base64 字符串发回。

这是我目前的情况。

import UIKit
import WebKit

class ViewController: UIViewController,
                        WKScriptMessageHandler,
                        UIImagePickerControllerDelegate,
                        UINavigationControllerDelegate {


    var webView: WKWebView?
    let userContentController = WKUserContentController()
    let picker = UIImagePickerController();

    @IBAction func photoFromLibrary(_ sender: UIBarButtonItem) {
        picker.allowsEditing = false
        picker.sourceType = .photoLibrary
        picker.mediaTypes = UIImagePickerController.availableMediaTypes(for: .photoLibrary)!
        present(picker, animated: true, completion: nil)
    }


    override func loadView() {
        super.loadView()


        let config = WKWebViewConfiguration()
        config.userContentController = userContentController

        self.webView = WKWebView(frame: self.view.bounds, configuration: config)
        userContentController.add(self, name: "iOS")

        let url = URL(string:"https://relate.lavishweb.com/account")
        let request = URLRequest(url: url!)
        _ = webView?.load(request)

        self.view = self.webView



    }

    override func viewDidLoad() {
        super.viewDidLoad()
        picker.delegate = self
    }


    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

        webView?.evaluateJavaScript("window.settings.setImageBase64FromiOS()") { (result, error) in
            if error != nil {
                print("Success")
            } else {
                print("Failure")
            }
        }


        // now use the name and token as you see fit!
    }

    func imagePickerController(_ picker: UIImagePickerController,
                               didFinishPickingMediaWithInfo info: [String : AnyObject])
    {
        let chosenImage = info[UIImagePickerControllerOriginalImage] as! UIImage //2
        //        myImageView.contentMode = .scaleAspectFit //3
        //        myImageView.image = chosenImage //4

        //I want to do additional stuff here and send back as a base64 String
        dismiss(animated:true, completion: nil) //5

    }
    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        dismiss(animated: true, completion: nil)
    }
}

Answer 1

好的，我明白了，

所以我不知道 IBAction 是什么，但基本上这意味着我将在它之后声明的函数是由 Interface Builder 元素（例如 UIButton 或类似的东西）调用的东西。意识到这一点后，我只是将功能更改为

func photoFromLibrary() {
    picker.allowsEditing = false
    picker.sourceType = .photoLibrary
    picker.mediaTypes = UIImagePickerController.availableMediaTypes(for: .photoLibrary)!
    present(picker, animated: true, completion: nil)
}

然后在我的 JavaScript 界面中，当我收到来自 JavasScript 的调用时，我只是简单地调用了函数。

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

    webView?.evaluateJavaScript("window.settings.setImageBase64FromiOS()") { (result, error) in
        if error != nil {
            print("failure")
        } else {
            self.photoFromLibrary()
        }
    }
}

敬请期待，我将post如何将图像编码为 Base64 字符串，同时在加载时缩小它。（当然，一旦我知道如何做到这一点）

编辑：我想出了如何快速调整图像大小并转换为 Base64 字符串的方法。

我实现了这个扩展...

extension UIImage {
    func resized(withPercentage percentage: CGFloat) -> UIImage? {
        let canvasSize = CGSize(width: size.width * percentage, height: size.height * percentage)
        UIGraphicsBeginImageContextWithOptions(canvasSize, false, scale)
        defer { UIGraphicsEndImageContext() }
        draw(in: CGRect(origin: .zero, size: canvasSize))
        return UIGraphicsGetImageFromCurrentImageContext()
    }
    func resized(toWidth width: CGFloat) -> UIImage? {
        let canvasSize = CGSize(width: width, height: CGFloat(ceil(width/size.width * size.height)))
        UIGraphicsBeginImageContextWithOptions(canvasSize, false, scale)
        defer { UIGraphicsEndImageContext() }
        draw(in: CGRect(origin: .zero, size: canvasSize))
        return UIGraphicsGetImageFromCurrentImageContext()
    }
}

然后我像这样返回字符串...

func imagePickerController(_ picker: UIImagePickerController,
                           didFinishPickingMediaWithInfo info: [String : AnyObject])
{
    let chosenImage = info[UIImagePickerControllerOriginalImage] as! UIImage 
    let thumb = chosenImage.resized(toWidth: 72.0)
    let imageData:NSData = UIImagePNGRepresentation(thumb!)! as NSData
    let dataImage = imageData.base64EncodedString(options: .lineLength64Characters)
    print(dataImage)
    dismiss(animated:true, completion: nil) //5

}

Answer 2

嗨，我有同样的问题，ein 解决了它，但它有点脏。在 viewDidLoad() 中，您覆盖了 WKWebView 的委托。 WKWebView 也使用委托。您需要将 Delegate 保存在本地。

var oldDelegate: UIImagePickerControllerDelegate?

override func viewDidLoad() {
    super.viewDidLoad()
    oldDelegate = picker.delegate   // save the Delegate from WKWebView
    picker.delegate = self
}

现在您可以运行在委托中编写代码。在您的方法 imagePickerController() 结束时，您必须从旧委托调用 imagePickerController()。

func imagePickerController(_ picker: UIImagePickerController,
                               didFinishPickingMediaWithInfo info: [String : AnyObject]){
        var myinfo = info
        let chosenImage = info[UIImagePickerControllerOriginalImage] as! UIImage //2
        //        myImageView.contentMode = .scaleAspectFit //3
        //        myImageView.image = chosenImage //4
        myinfo[UIImagePickerControllerOriginalImage] = chosenImage
        myinfo[UIImagePickerControllerImageURL] = nil

        oldDelegate?.imagePickerController!(picker, didFinishPickingMediaWithInfo: myinfo)
    }

我将 URL 设置为零，因为如果 URL 已填充，WKWebView 会直接从驱动器加载图像。 myinfo[UIImagePickerControllerImageURL] = nil

希望对您有所帮助。

如何从 webview 使用 UIImagePickerController

How to use UIImagePickerController from webview

javascript

ios

wkwebview

swift3