Swift4.0版-H5頁(yè)面實(shí)現(xiàn)長(zhǎng)按保存圖片

• 剛開(kāi)始拿到需求還是比較尷尬的,不會(huì)啊,沒(méi)做過(guò)啊,是不是就尷尬了
• 隨即想了一下,好像微信里好多H5頁(yè)面都有這樣的功能
• 然后查閱了一下相關(guān)資料,發(fā)現(xiàn)兩行核心代碼

//獲取長(zhǎng)按所在點(diǎn)
let urlString = "document.elementFromPoint(\(touchPoint.x), \(touchPoint.y)).src"

//根據(jù)該點(diǎn)的參數(shù)獲取對(duì)應(yīng)圖片的鏈接
let saveUrl = webView.stringByEvaluatingJavaScript(from: urlString)

下面來(lái)一起啊看一下完整的代碼步驟

首先給UiWebView加一個(gè)長(zhǎng)按手勢(shì)

//添加長(zhǎng)按手勢(shì)
let longPressGes = UILongPressGestureRecognizer(target: self, action: #selector(longPressedGesture(_:)))
//一定要遵循代理
longPressGes.delegate = self
webView.addGestureRecognizer(longPressGes)

實(shí)現(xiàn)代理方法

//不實(shí)現(xiàn)該代理方法,長(zhǎng)按無(wú)效
//MARK: 手勢(shì)代理方法
extension SIWebViewController : UIGestureRecognizerDelegate{
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }
}

接著在手勢(shì)響應(yīng)方法里面實(shí)現(xiàn)相應(yīng)的功能

注意:

• 一定要判斷手勢(shì)的state屬性
• 判斷saveUrl是否是一個(gè)nil值

@objc func longPressedGesture(recognizer: UILongPressGestureRecognizer){
    if recognizer.state != .began { return }
        
   let touchPoint = recognizer.location(in: webView)
    
    //核心代碼
    let urlString = "document.elementFromPoint(\(touchPoint.x), \(touchPoint.y)).src"
   if let saveUrl = webView.stringByEvaluatingJavaScript(from: urlString) {
        //判斷圖片的鏈接是否為空,長(zhǎng)度是否為o
        if saveUrl.characters.count == 0 { return }
        addAlertAction(saveUrl)
    }
}

調(diào)用保存圖片功能按鈕

fileprivate func addAlertAction(imageStr: String){
        let alertV = UIAlertController()
        let saveAction = UIAlertAction(title: "保存圖片", style: .default) { (alertV) in
            self.saveImageToDisk(imageStr)
        }
        //取消保存不作處理
        let cancelAction = UIAlertAction(title: "取消", style: .cancel, handler: nil)
        
        alertV.addAction(saveAction)
        alertV.addAction(cancelAction)
        controller.present(alertV, animated: true, completion: nil)
}

使用SDWebImage保存圖片

• 注意使用SDWebImage的緩存機(jī)制

    //保存圖片
    fileprivate func saveImageToDisk(_ imageStr: String){
        guard let imageUrl = URL(string: imageStr) else { return }
        let sdManager = SDWebImageManager.shared()
        
        var image : UIImage!
        if (sdManager?.diskImageExists(for: imageUrl))! {
           //先從緩存中查找圖片
            image = sdManager?.imageCache.imageFromDiskCache(forKey: imageUrl.absoluteString)
        }else{
           //緩存中沒(méi)有圖片在進(jìn)行網(wǎng)絡(luò)下載
            let data = try! Data(contentsOf: imageUrl)
            image = UIImage(data: data)
        }
        
        //保存圖片到相冊(cè)中
        UIImageWriteToSavedPhotosAlbum(image, self, #selector(self.image(_:didFinishSavingWithError:contextInfo:)), nil)
    }

最后是一個(gè)保存成功與否的回調(diào)方法

@objc func image(_ image: UIImage, didFinishSavingWithError: NSError?, contextInfo: AnyObject){
    if didFinishSavingWithError != nil {
        MBProgressHUD.show(string: "請(qǐng)開(kāi)啟訪問(wèn)相冊(cè)權(quán)限后使用此功能", inView: self.view)
    } else {
        MBProgressHUD.show(string: "圖片保存成功", inView: self.view)
    }
}

以上如有不妥之處還望多多指正