画像上のRGB値を取得したいのですが、、、

Question

前提・実現したいこと

ネット上のサンプルコードを使って、画像のタップした場所の
RGB値を取得するアプリを試しているのですが、
うまくいきません。

発生している問題・エラーメッセージ

画像を読み込んで任意の場所をタップしても
その場所の色と違う数値がでてしまいます。

storyubord上で配置したprintlabelでRGBの数値の表示を、
clorviewでその色のUIViewを表示するようにしています。

該当のソースコード

import UIKit

class TapViewController: UIViewController {
    
    
    @IBOutlet var imageView: UIImageView!
    @IBOutlet var printlabel: UILabel!
    @IBOutlet var clorview: UIView!
    
    var image = UIImage()
    //表示されている画像のタップ座標用変数
    var tapPoint = CGPoint(x: 0, y: 0)
    
    override func viewDidLoad() {
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    //imageviewをタップした時に色を判別
    @IBAction func getImageRGB(_ sender: UITapGestureRecognizer) {
        
        guard imageView.image != nil else {return}
        
        //タップした座標の取得
        tapPoint = sender.location(in: imageView)
        
        let cgImage = imageView.image?.cgImage!
        let pixelData = cgImage?.dataProvider!.data
        let data: UnsafePointer = CFDataGetBytePtr(pixelData)
        //1ピクセルのバイト数
        let bytesPerPixel = (cgImage?.bitsPerPixel)! / 8
        //1ラインのバイト数
        let bytesPerRow = (cgImage?.bytesPerRow)!
        print("bytesPerPixel=(bytesPerPixel) bytesPerRow=(bytesPerRow)")
        //タップした位置の座標にあたるアドレスを算出
        let pixelAd: Int = Int(tapPoint.y) * bytesPerRow + Int(tapPoint.x) * bytesPerPixel
        //それぞれRGBAの値をとる
        let r = CGFloat(Int( CGFloat(data[pixelAd])))///CGFloat(255.0)*100)) / 100
        let g = CGFloat(Int( CGFloat(data[pixelAd+1])))///CGFloat(255.0)*100)) / 100
        let b = CGFloat(Int( CGFloat(data[pixelAd+2])))///CGFloat(255.0)*100)) / 100
        let a = CGFloat(Int( CGFloat(data[pixelAd+3])/CGFloat(255.0)*100)) / 100
        
        print([r,g,b,a])
        //navigationbarに結果を表示
        let R = "R:" + String(Int(r))
        let G = " G:" + String(Int(g))
        let B = " B:" + String(Int(b))
        let A = " A:" +  String(format: "%.1f", a)
        navigationItem.title = R + G + B + A
        
        printlabel.text = "([r,g,b,a])"
        
        clorview.backgroundColor = UIColor(red: CGFloat(r / 255), green: CGFloat(g/255), blue: CGFloat(b/255), alpha: 1.0)
    }
}


//画像を選択
extension TapViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    
    //画像を選んだ時の処理
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
        
        let selectedImage = info[UIImagePickerControllerOriginalImage] as! UIImage
        //サイズを圧縮する
        // let resizedImage = selectedImage.scale(byFactor: 0.4)
        
        image = selectedImage
        
        var imageHeight = image.size.height
        var imageWidth = image.size.width
        
        let navigationBarHeight = navigationController?.navigationBar.frame.height
        let width = self.view.frame.width
        let height = self.view.frame.height
        let centerX = self.view.center.x
        let centerY = self.view.center.y
        let widthRatio = imageWidth
        let heightRatio = imageHeight
        //画像の大きさに応じてiamgeviewのサイズを変える
        if imageHeight > self.view.frame.height || imageWidth > self.view.frame.width {
            print("1")
            imageWidth = width
            imageHeight = width*heightRatio/widthRatio
            
        } else if imageHeight > self.view.frame.height {
            print("2")
            imageHeight = height
            imageWidth = height*widthRatio/heightRatio
            
        } else if imageWidth > self.view.frame.width {
            print("3")
            imageWidth = width
            imageHeight = width*heightRatio/widthRatio
            
        } else {
        }
        
        imageView.contentMode = UIViewContentMode.scaleAspectFill
        imageView.frame.size = CGSize(width: imageWidth, height: imageHeight)
        //画像がnavigationbarに被らないようにする
        if imageHeight/2 > (height/2 - navigationBarHeight!) {
            print("4")
            imageView.center = CGPoint(x: centerX, y: centerY + navigationBarHeight!)
        } else {
            print("5")
            imageView.center = CGPoint(x: centerX, y: centerY)
        }
        
        imageView.image = image
        
        picker.dismiss(animated: true, completion: nil)
    }
    
    
    
    // 撮影がキャンセルされた時に呼ばれる
    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        picker.dismiss(animated: true, completion: nil)
    }
    
    func tappedlibrary() {
        let sourceType:UIImagePickerControllerSourceType =
            UIImagePickerControllerSourceType.photoLibrary
        
        if UIImagePickerController.isSourceTypeAvailable(
            UIImagePickerControllerSourceType.photoLibrary){
            // インスタンスの作成
            let cameraPicker = UIImagePickerController()
            cameraPicker.sourceType = sourceType
            cameraPicker.delegate = self
            self.present(cameraPicker, animated: true, completion: nil)
        }
        else{
            print("error")
            
        }
    }
    
    func tappedcamera() {
        let sourceType:UIImagePickerControllerSourceType =
            UIImagePickerControllerSourceType.camera
        // カメラが利用可能かチェック
        if UIImagePickerController.isSourceTypeAvailable(
            UIImagePickerControllerSourceType.camera){
            // インスタンスの作成
            let cameraPicker = UIImagePickerController()
            cameraPicker.sourceType = sourceType
            cameraPicker.delegate = self
            self.present(cameraPicker, animated: true, completion: nil)
            
        }
        else{
            print("error")
        }
    }
    
    @IBAction func selecteImageButton(_ sender: UITapGestureRecognizer) {
        //アラート表示のために
        let actionSheet = UIAlertController(title: "", message: "写真の選択", preferredStyle: UIAlertControllerStyle.actionSheet)
        
        let tappedcamera = UIAlertAction(title: "カメラで撮影する", style: UIAlertActionStyle.default, handler: {
            (action: UIAlertAction!) in
            self.tappedcamera()
        })
        
        let tappedlibrary = UIAlertAction(title: "ライブラリから選択する", style: UIAlertActionStyle.default, handler: {
            (action: UIAlertAction!) in
            self.tappedlibrary()
        })
        
        let cancel = UIAlertAction(title: "キャンセル", style: UIAlertActionStyle.cancel, handler: {
            (action: UIAlertAction!) in
            print("キャンセル")
        })
        
        actionSheet.addAction(tappedcamera)
        actionSheet.addAction(tappedlibrary)
        actionSheet.addAction(cancel)
        
        present(actionSheet, animated: true, completion: nil)
    }

}

補足情報（FW/ツールのバージョンなど）

Xcode 11.3.1
テスト実機 iPhone11 iOS 13.4.1

Comments

[TsukubaDepot]

参考にされた記事のURLもご質問に追記していただけないでしょうか。
ちなみに、ピクセルの情報を取得する際、アルファ値のみ正規化しているように見えますが、それ以外の値を正規化しない理由はなにかあるのでしょうか。

[nekojaras]

参考にしたのはこちらになります。
https://qiita.com/panzee54/items/89d94f5cffd92358fce3

すみません、試してみて思うように動かなかったので、
アルファ値のみ1.0にしてみて、そのままになっていました。
UIViewは色を見るために自分で付け加えたもので、
変なコードを書いてしまっているかもしれません。
参考URLのものをそのままで動かしてもなぜか正しい色の数値が
出てきませんでした。

Answer 1

余計な型キャストがある以外は、基本的な手法としては間違っていないと思います。

正確な色が取れない原因は、スクリーン上でタッチした部分の座標と、UIImage で cgImage として保存されているビットマップ上での座標に対応が取れていないことが原因だと思われます。

ためしに、画像の表示方法を .topLeft のように、ビットマップのピクセルと画素を一対一対応できるように変更して色を調べると、おおよそ想定している色が取得できることは確認しました。

では、根本的に解決するための方法ですが、これは cgImage 構造体で取得できるピクセル数と、表示されているピクセル数を元に、座標変換を行うような処理をさらに追加する必要があるように感じられます。

• CGImage

A bitmap image or image mask.

参考にされているコードだと、デバイスの画素数よりもビットマップの画素数が明らかに少ない場合にはそのまま適用できそうに思いますが、デバイスの画素数よりもビットマップの画素数が大きい場合は、ビットマップの画素数を元に正確に計算する必要があると思います。

UIImage の size 構造体で画像のサイズを計算していますが、それはあくまでも表示上のサイズであって、実ピクセル数ではないかと思います。

• size

The logical dimensions, in points, for the image.

要は、

• cgImage の width および height からビットマップ寸法を実ピクセル数として求める
• ピクセル数が表示領域より大きい場合は、適切にリサイズする。そのとき、実画像のアスペクト比を変更しないように注意する
• UIImage には .topLeft など、実ピクセル数を元にした表示方法を設定する
• tapGestureRecognizer で取得した座標を、cgImage の座標に変換する
• 直接ポインタを操作して RGBA 値をもとめる（これは現状のコードで可能）

という流れにする必要がある、ということになります。

作業量が多いため、上記のことについて全て検証することはできませんが、参考になればと思います。

Comments

[nekojaras]

検証とアドバイスありがとうございます。
教えられていただいたとおりに、.topLeftで小さいサイズの画像を配置したところ、正しい数値を得ることができました！
あとは、大きな画像のリサイズをできるように、作ってみようと思います。
本当にありがとうございました！

[TsukubaDepot]

参考になりそうでよかったです。

最近のiPhone/iPadはRetinaで見た目の解像度と論理的な解像度が違うため、そこも気をつける必要がありそうです（解像度400pxでも、画像は1200pxで表示しているような感じです。とうぜん、元解像度がひくければそれにあわせて自動的に最適な解像度が選ばれます）。
UIImage にも cgImage にも scaleFactor みたいなプロパティがありますので、それで実際に表示させている解像度を調べておくと、もう少し見通しが良くなるかもしれません。