2017年5月18日木曜日

画像サイズ変更

画像サイズを縮小したり拡大したりする方法。とりあえず縮小で説明。

要は、UIGraphicsImageContext(オフスクリーンバッファだな)を縮小(拡大)したサイズで作り、そこに元の画像をdrawすればいい。

以下でimageには512*512の画像が入っているとする。それを256*256のContextにdrawすると、Contextの縦横に合わせて画像が縮小されるわけですな。


//オフスクリーンのコンテキスト作成
UIGraphicsBeginImageContextWithOptions(CGSize(width: 256, height: 256), false, 0.0) 
//コンテキストに画像を描画
image.draw(in: CGRect(x: 0, y: 0, width: 256, height: 256))
//コンテキストから画像を得る
myImageView.image = UIGraphicsGetImageFromCurrentImageContext()

UIGraphicsEndImageContext()


drawする際にCGRectの各値を変更すれば、描画位置を変えたり、縦横を縮小(拡大)して描画することができる。

単純な拡大も、例えば100*100の画像を256*256のコンテキストに描画すれば拡大されるっちゅうわけ。

画像のクロップ(切り抜き)

画像の一部をクロップする方法。(とりあえず矩形で)

たとえば1024*1024の画像があったとして、そのx:100, y:100, width:200, height:200 の部分をクロップしたい場合、
UIImageのcgImage.cropping(to:)でクロップしたい範囲を指定してやれば、クロップした画像がCGImageとして得られるので、それを再びUIImageに変換してやればいい。
か〜んた〜ん♪


func cropImage(image:UIImage, cropRect:CGRect) -> UIImage {
    let cropRef = image.cgImage!.cropping(to: cropRect) //クロップ
    //UIImageに戻す
    let cropImage = UIImage(cgImage: cropRef!, scale: image.scale, orientation: image.imageOrientation)
    
    return cropImage
}

クロップ範囲に画像より大きい範囲を指定した場合

クロップはおこなわれない。
余白がつくとかはないよ。

解像度の違いに注意

画像によって(たとえばスクリーンキャプチャしたもの)はiPadとiPhoneで解像度に違いがあるため、クロップ範囲をそれに合わせないといけない。

iPadの768*1024の画面をキャプチャしたものはそのまま768*1024の等倍サイズだが、iPhoneの場合、320*568の画面をキャプチャしたものは画像サイズこそ320*568だが、2倍の解像度になっているので、内部的には640*1136になっている。

その解像度の比率はUIImageのscaleプロパティで得られるので、クロップ範囲のwidthとheightにそれぞれかけてやればいい。
キャプチャした画像のscaleプロパティは、iPadは1.0、iPhoneなら2.0になってるはずだ。
キャプチャしたものじゃなくても当然解像度に違いがある画像ならこのプロパティを使って計算すればいいと思う。

let cropRect = CGRect(x: 0, y: 0, width: image.size.width * image.scale, height: image.size.height * image.scale)
image = self.cropImage(image: image, cropRect: cropRect)

スクリーンショット

スクリーンショットの撮りかた。
GraphicsContext(要はメモリ上に作る描画領域=オフスクリーンバッファだな)を作り、そこに画面に表示されてるviewのlayer(bitmapの画像がある…はず)をrenderしてやることでスクリーンショットが撮れるわけですな。

今回はviewの部分だけのキャプチャーなので、画面一番上に時計とかを表示してるステータスバーなんかはキャプチャーされない。
普通にスクリーンショットを撮った時みたいに、そこまで含めたい場合はまた今度調べる。


    func getScreenShot() -> UIImage {
        //viewと同じサイズのコンテキスト(オフスクリーンバッファ)を作成
        let rect = self.view.bounds
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
        //現在のviewの中身(スクリーン)をコンテキストに描画
        //viewの中身なのでステータスバーなどは含まれないようだ
        let context: CGContext = UIGraphicsGetCurrentContext()!
        self.view.layer.render(in: context)
        //スクリーンがキャプチャされたコンテキストからUIImageを作成
        let capturedImage : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        //コンテキストの扱いを終了
        UIGraphicsEndImageContext()
        
        return capturedImage

    }


上にボタンとかを重ねてて、それをキャプチャーしたくない場合は、直前でhiddenして直後にまた表示すればいい。

Retinaディスプレイの場合、たとえばiPadの768*1024のスクリーンショットでも、倍の1536*2048の画像ができるので、それをさらに加工したりするときは注意。


このUIGraphicsBeginImageContext() 〜 UIGraphicsEndImageContext()で囲んだ間でオフスクリーンを操作するやり方はいろいろ使い道がありそうだ。

参考サイト