如何从 webview 使用 UIImagePickerController

Posted

技术标签:

【中文标题】如何从 webview 使用 UIImagePickerController【英文标题】:How to use UIImagePickerController from webview 【发布时间】:2017-10-22 12:36:55 【问题描述】:

我正在在线关注本教程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)
    

【问题讨论】:

【参考方案1】:

嗨,我有同样的问题,一个 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 设置为 nil,因为如果 URL 已填充,WKWebView 会直接从驱动器加载图像。 myinfo[UIImagePickerControllerImageURL] = 无

我希望这会有所帮助。

【讨论】:

【参考方案2】:

好吧,我想通了,

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

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

然后在我的 JavaScript 界面中,当我收到来自 JavaScript 的调用时,我只是调用了该函数。

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

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

敬请期待,我将发布如何将图像编码为 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


【讨论】:

以上是关于如何从 webview 使用 UIImagePickerController的主要内容,如果未能解决你的问题,请参考以下文章

WebView - 如何使用从网站上的应用程序收集的数据

如何使用fabric从twitter webview中检索登录回调

Android:如何从 webview 中选择文本

如何使用 Http Post 从 WebView 中检索和修改 HTML 内容

如何从 JavaScript 滚动 <webview> 标签的内容?

Stripe 付款后如何从 Webview 重定向到 React Native Expo 应用程序?