DDGScreenShot--iOS各種截圖着逐,web wkweb生成長(zhǎng)圖崔赌,圖片處理

寫在前面

最近有這么一個(gè)需求意蛀,分享頁(yè)面,分享的是web訂單截圖健芭,既然是web 就會(huì)有超出屏幕的部分县钥,
生成的圖片還要加上我們的二維碼,這就涉及到圖片的合成了慈迈。
有了這樣的需求若贮,就是各種google.也算解決了自己的需求,另外痒留,也總結(jié)了一下谴麦,對(duì)需求做了下拓展,目前是swift4.0版本伸头。

整合成一個(gè)三方庫(kù)匾效,以下只是部分代碼,詳細(xì)代碼及demo請(qǐng)見(jiàn)恤磷,github地址https://github.com/dudongge/DDGScreenShot

DDGScreenShot 部分功能演示

image
image
image
image


View生成圖片

代碼也比較簡(jiǎn)單 screenShotImage 就是截取后的圖片
        let context = UIGraphicsGetCurrentContext()
        context?.saveGState()
        context?.translateBy(x: -self.frame.origin.x, y: -self.frame.origin.y);
         self.layer.render(in: context!)
        let screenShotImage = UIGraphicsGetImageFromCurrentImageContext()
        context?.restoreGState();
        UIGraphicsEndImageContext()

ScrollView生成圖片

只要實(shí)現(xiàn)原理是計(jì)算偏移量面哼,每一屏繪制一次,放在內(nèi)存里扫步,最后將所有的圖片組合成一張圖片 screenShotImage就是最終圖片
public func DDGContentScrollScreenShot (_ completionHandler: @escaping (_ screenShotImage: UIImage?) -> Void) {
        
        self.isShoting = true
        
        let snapShotView = self.snapshotView(afterScreenUpdates: true)
        snapShotView?.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: (snapShotView?.frame.size.width)!, height: (snapShotView?.frame.size.height)!)
        self.superview?.addSubview(snapShotView!)

        let bakOffset    = self.contentOffset
        
        let page  = floorf(Float(self.contentSize.height / self.bounds.height))
        
        UIGraphicsBeginImageContextWithOptions(self.contentSize, false, UIScreen.main.scale)
        
        self.DDGContentScrollPageDraw(0, maxIndex: Int(page), drawCallback: { [weak self] () -> Void in
            let strongSelf = self
            
            let screenShotImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            
            strongSelf?.setContentOffset(bakOffset, animated: false)
            snapShotView?.removeFromSuperview()
            
            strongSelf?.isShoting = false
            
            completionHandler(screenShotImage)
        })
        
    }
    
    fileprivate func DDGContentScrollPageDraw (_ index: Int, maxIndex: Int, drawCallback: @escaping () -> Void) {
        
        self.setContentOffset(CGPoint(x: 0, y: CGFloat(index) * self.frame.size.height), animated: false)
        let splitFrame = CGRect(x: 0, y: CGFloat(index) * self.frame.size.height, width: bounds.size.width, height: bounds.size.height)
        
        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + Double(Int64(0.3 * Double(NSEC_PER_SEC))) / Double(NSEC_PER_SEC)) { () -> Void in
            self.drawHierarchy(in: splitFrame, afterScreenUpdates: true)
            
            if index < maxIndex {
                self.DDGContentScrollPageDraw(index + 1, maxIndex: maxIndex, drawCallback: drawCallback)
            }else{
                drawCallback()
            }
        }
    }

UIwebView生成圖片 && wkwebView

繪制時(shí)大同小異魔策,只是wkwebView 調(diào)用的繪制方法為:drawHierarchy 其核心代碼如下
采用遞歸,直到拿到最后一個(gè)偏移量河胎。
fileprivate func DDGRenderImageView(_ completionHandler: @escaping (_ screenShotImage: UIImage?) -> Void) {
        let ddgTempRenderView = UIView(frame: CGRect(x: 0, y: 0, width: self.contentSize.width, height: self.contentSize.height))
        self.removeFromSuperview()
        ddgTempRenderView.addSubview(self)
        
        self.contentOffset = CGPoint.zero
        self.frame         = ddgTempRenderView.bounds
        
        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + Double(Int64(0.3 * Double(NSEC_PER_SEC))) / Double(NSEC_PER_SEC)) { () -> Void in
            let bounds = self.bounds
            UIGraphicsBeginImageContextWithOptions(bounds.size, false, UIScreen.main.scale)
            
            if (self.DDGContainsWKWebView()) {
                self.drawHierarchy(in: bounds, afterScreenUpdates: true)
            }else{
                self.layer.render(in: UIGraphicsGetCurrentContext()!)
            }
            let screenShotImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            
            completionHandler(screenShotImage)
        }
    }
fileprivate func shotScreenContentScrollPageDraw (_ index: Int, maxIndex: Int, drawCallback: @escaping () -> Void) {
        
        self.scrollView.setContentOffset(CGPoint(x: 0, y: CGFloat(index) * self.scrollView.frame.size.height), animated: false)
        let splitFrame = CGRect(x: 0, y: CGFloat(index) * self.scrollView.frame.size.height, width: bounds.size.width, height: bounds.size.height)
        
        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + Double(Int64(0.3 * Double(NSEC_PER_SEC))) / Double(NSEC_PER_SEC)) { () -> Void in
            self.drawHierarchy(in: splitFrame, afterScreenUpdates: true)
            
            if index < maxIndex {
                self.shotScreenContentScrollPageDraw(index + 1, maxIndex: maxIndex, drawCallback: drawCallback)
            }else{
                drawCallback()
            }
        }
    }

兩張圖片合為一張(一張底圖闯袒,一張logo)

在UIImage上做了拓展
let imageRef = self.cgImage
        let w: CGFloat = CGFloat((imageRef?.width)!)
        let h: CGFloat = CGFloat((imageRef?.height)!)
        //以1.png的圖大小為畫布創(chuàng)建上下文
        UIGraphicsBeginImageContext(CGSize(width: w, height: h))
        self.draw(in: CGRect(x: 0, y: 0, width: w, height: h))
        //先把1.png 畫到上下文中
        logo.draw(in: CGRect(x: logoOrigin.x,
                             y: logoOrigin.y,
                             width: logoSize.width,
                             height:logoSize.height))
        //再把小圖放在上下文中
        let resultImg: UIImage? = UIGraphicsGetImageFromCurrentImageContext()
        //從當(dāng)前上下文中獲得最終圖片
        UIGraphicsEndImageContext()
        return resultImg!

在圖片上寫文字/加標(biāo)簽

同樣對(duì)UIimage 做了拓展,增加了幾個(gè)參數(shù)
  public func drawTextInImage(text: String,
                         textColor: UIColor,
                         textFont: CGFloat,
                         textBgColor: UIColor,
                         textX: CGFloat,
                         textY: CGFloat )->UIImage {
        //開(kāi)啟圖片上下文
        UIGraphicsBeginImageContext(self.size)
        //圖形重繪
        self.draw(in: CGRect.init(x: 0, y: 0, width: self.size.width, height: self.size.height))
        //水印文字屬性
        let att = [NSAttributedStringKey.foregroundColor: textColor,
                   NSAttributedStringKey.font: UIFont.systemFont(ofSize: textFont),
                   NSAttributedStringKey.backgroundColor: textBgColor]
        //水印文字大小
        let text = NSString(string: text)
        let size =  text.size(withAttributes: att)
        //繪制文字
        text.draw(in: CGRect.init(x: textX, y: textY, width: size.width, height: size.height), withAttributes: att)
        //從當(dāng)前上下文獲取圖片
        let image = UIGraphicsGetImageFromCurrentImageContext()
        //關(guān)閉上下文
        UIGraphicsEndImageContext()
        return image!
    }

結(jié)束語(yǔ)

空間有限仿粹,所注代碼不全搁吓,我把上述功能整理成了最新的帶三方庫(kù),
以后會(huì)加上圖片的相關(guān)處理吭历,比如美顏堕仔,剪切,馬賽克晌区,組圖等摩骨,
附上我的git地址:https://github.com/dudongge/DDGScreenShot
有什么問(wèn)題也可以聯(lián)系我QQ:532835032
如果對(duì)您有幫助,請(qǐng)您不吝star一下朗若,增加我更新的動(dòng)力

附上github上READER.ME文件部分內(nèi)容

## view截屏:
    view.DDGScreenShot { (image) in
         拿到 image 
         各種復(fù)雜裝逼操作
         恼五、、哭懈、灾馒、
    }
   ## ScrollView截屏:
    scrollView.DDGContentScrollScreenShot { (image) in
         拿到 image 
         各種復(fù)雜裝逼操作
         、遣总、睬罗、轨功、
    }
  ## webView截屏:
    webView.DDGContentscreenShot { (image) in
         拿到 image 
         各種復(fù)雜裝逼操作
         、容达、古涧、、
    }
  ## wkwebView截屏: 方法和webView 一樣花盐,內(nèi)部做了校驗(yàn)
      webView.DDGContentscreenShot { (image) in
           拿到 image 
           各種復(fù)雜裝逼操作
           羡滑、、算芯、柒昏、
      }
  ## image 加 logo
     let image = image.composeImageWithLogo( logo: UIImage,
                               logoOrigin: CGPoint,
                               logoSize:CGSize) 
     傳入 logo圖片,logo位置 logo 大小 就可以得到一張生成好的圖片                         
         也祠、昙楚、近速、诈嘿、
  ## image 加 標(biāo)簽,水印削葱,文字
     let image = image.drawTextInImage(text: String,
                         textColor: UIColor,
                         textFont: CGFloat,
                         textBgColor: UIColor,
                         textX: CGFloat,
                         textY: CGFloat ) 
     傳入 文字奖亚、文字顏色、字體大小析砸、背景顏色昔字,字體起始位置 就可以得到一張生成好的帶標(biāo)簽的圖片                         
         、首繁、作郭、、
         注弦疮,此方法在提交pod有問(wèn)題夹攒,故將方法屏蔽,有需要的可以拷貝代碼胁塞,到本地

## 使用pod
     iOS 9.0+, Swift 4.0+(Compatiable)
        使用pod 導(dǎo)入
        pod 'DDGScreenShot', '~> 1.0.1'
        ```

歡迎查看DDGScreenShot

其余功能如下

  1. (一)DDGScreenShot — 復(fù)雜屏幕截屏(如view ScrollView webView wkwebView)
  2. (二)DDGScreenShot--iOS 圖片處理--多圖片拼接
  3. (三)DDGScreenShot--iOS 圖片裁剪咏尝,切圓角,加邊框啸罢,你還用cornerRadius编检,還有更高級(jí)的用法
  4. (四)DDGScreenShot—圖片擦除功能
  5. (五)DDGScreenShot—截取圖片的任意部分
  6. (六)DDGScreenShot —圖片加各種濾鏡高逼格操作
  7. (七)DDGScreenShot —圖片加高斯模糊,老電影效果
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末扰才,一起剝皮案震驚了整個(gè)濱河市允懂,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌衩匣,老刑警劉巖蕾总,帶你破解...
    沈念sama閱讀 206,126評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件酣倾,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡谤专,警方通過(guò)查閱死者的電腦和手機(jī)躁锡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)置侍,“玉大人映之,你說(shuō)我怎么就攤上這事±唬” “怎么了杠输?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,445評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)秕衙。 經(jīng)常有香客問(wèn)我蠢甲,道長(zhǎng),這世上最難降的妖魔是什么据忘? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,185評(píng)論 1 278
  • 正文 為了忘掉前任鹦牛,我火速辦了婚禮,結(jié)果婚禮上勇吊,老公的妹妹穿的比我還像新娘曼追。我一直安慰自己,他們只是感情好汉规,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布礼殊。 她就那樣靜靜地躺著,像睡著了一般针史。 火紅的嫁衣襯著肌膚如雪晶伦。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 48,970評(píng)論 1 284
  • 那天啄枕,我揣著相機(jī)與錄音婚陪,去河邊找鬼。 笑死射亏,一個(gè)胖子當(dāng)著我的面吹牛近忙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播智润,決...
    沈念sama閱讀 38,276評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼及舍,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了窟绷?” 一聲冷哼從身側(cè)響起锯玛,我...
    開(kāi)封第一講書(shū)人閱讀 36,927評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后攘残,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體拙友,經(jīng)...
    沈念sama閱讀 43,400評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評(píng)論 2 323
  • 正文 我和宋清朗相戀三年歼郭,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了遗契。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 37,997評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡病曾,死狀恐怖牍蜂,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情泰涂,我是刑警寧澤鲫竞,帶...
    沈念sama閱讀 33,646評(píng)論 4 322
  • 正文 年R本政府宣布,位于F島的核電站逼蒙,受9級(jí)特大地震影響从绘,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜是牢,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評(píng)論 3 307
  • 文/蒙蒙 一僵井、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧妖泄,春花似錦驹沿、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,204評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)朋蔫。三九已至罚渐,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間驯妄,已是汗流浹背荷并。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,423評(píng)論 1 260
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留青扔,地道東北人源织。 一個(gè)月前我還...
    沈念sama閱讀 45,423評(píng)論 2 352
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像微猖,于是被迫代替她去往敵國(guó)和親谈息。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 用到的組件 1凛剥、通過(guò)CocoaPods安裝 2侠仇、第三方類庫(kù)安裝 3、第三方服務(wù) 友盟社會(huì)化分享組件 友盟用戶反饋 ...
    SunnyLeong閱讀 14,601評(píng)論 1 180
  • 天朗云自清 山中云自揚(yáng) 隨意共曲水 歡笑已流觴 2017-08-17
    李和同閱讀 94評(píng)論 0 0
  • 孤獨(dú),在中國(guó)文字里解釋桨吊,孤是王者慕爬,獨(dú)是獨(dú)一無(wú)二,獨(dú)一無(wú)二的王者必需永遠(yuǎn)接受孤獨(dú)屏积,他不需要接受任何人的認(rèn)同医窿,更加不需...
    索菲瑪蘇閱讀 399評(píng)論 0 0
  • 今天樹(shù)兒逃學(xué)一天,小家伙表示出很滿足的樣子炊林。很多事情都會(huì)與我好好地溝通協(xié)商姥卢,表現(xiàn)出非常順從。我心里那么美啊渣聚,樹(shù)兒又...
    苗苗在故鄉(xiāng)閱讀 351評(píng)論 2 0
  • (五) 子路頂嘴 孔子雖然下學(xué)人事上達(dá)天命独榴,但人事有否有泰,天命有窮有通奕枝,孔子通...
    妙智閱讀 2,656評(píng)論 1 3