はじめに
こんにちは！株式会社ZOZOでiOSエンジニアをしている加藤です。本記事では、SwiftとOpenCVを用いて画像処理する方法を解説します。さらに、C++で画像処理を行い、Swiftで結果を表示する方法についても紹介します。
目次
- 画像処理の概要・前準備
- Swiftのみで画像処理
- SwiftとObjective C++で画像処理
- SwiftとC++で画像処理
画像処理の概要・前準備
まず画像処理とは、デジタル画像に対して計算処理を行い、画像の特徴を強調したり、必要な情報を抽出したりする技術や手法の総称です。今回は、画像の波線部分の色を黄色から緑色に変換する処理を行います。具体的な処理の流れは、以下の通りです。
- 画像を白〜黒にする（グレースケール化）
- 画像を白黒にする（二値化）
- 画像から輪郭を抽出する
- 輪郭を塗りつぶす
以下は、画像処理の各ステップを示したスクリーンショットです。
| グレースケール化 | 二値化 | 輪郭抽出 |
|---|---|---|
 |
 |
 |
今回の記事ではSwiftとOpenCVの説明が主なので、上記の画像処理フローの詳細な説明は割愛します。
Swiftのみで画像処理
SwiftでOpenCVを利用する場合には、opencv2.frameworkなどのフレームワークを追加する必要があります。今回はXcodeで開発しており、Xcodeにおけるopencv2.frameworkの追加方法は以下の記事を参考にしました。
Swiftのみで行う画像処理は以下の通りです。
ImagePainter.swift
import UIKit
import opencv2
enum ImagePainter {
static func imagePainting(assetName: String) -> UIImage? {
guard let image = UIImage(named: assetName) else {
return nil
}
let mat = Mat(uiImage: image)
let matGray = mat.clone()
// グレースケール化
Imgproc.cvtColor(
src: mat,
dst: matGray,
code: ColorConversionCodes.COLOR_RGBA2GRAY
)
// 二値化
let matBinary = mat.clone()
Imgproc.threshold(
src: matGray,
dst: matBinary,
thresh: 100,
maxval: 255,
type: .THRESH_BINARY
)
let contoursNSMutableArray: NSMutableArray = []
let hierarchy = Mat()
// 領域抽出
Imgproc.findContours(
image: matBinary,
contours: contoursNSMutableArray,
hierarchy: hierarchy,
mode: RetrievalModes.RETR_TREE,
method: ContourApproximationModes.CHAIN_APPROX_SIMPLE
)
var contours: [[Point2i]] = []
for contourObj in contoursNSMutableArray {
if let contour = contourObj as? [Point2i] {
if contour.count < 100 { // 面積閾値を設定して、小さい領域を無視
continue
}
contours.append(contour)
}
}
// 塗りつぶしの色を指定
let green: Scalar = Scalar(0, 255, 0, 255)
let coloringImage = mat.clone()
// 指定した色で塗りつぶし
Imgproc.drawContours(image: coloringImage, contours: contours, contourIdx: -1, color: green, thickness: -1)
return coloringImage.toUIImage()
}
}
imagePainting関数からreturnされたUIImageが画像処理された画像になります。
SwiftとObjective C++で画像処理
C++で画像処理を行い、Swiftで表示する方法の一つとして、Objective C++でブリッジするという方法があります。そのため、ブリッジヘッダーを作成してから実装する必要があります。プログラムは以下の通りです。
let objcPaintedImage = ObjcImagePainter.imagePainting(UIImage(named: assetName))
ObjcImagePainter.mm
#import <opencv2/opencv.hpp>
#import <opencv2/imgcodecs/ios.h>
#include "ObjcImagePainter.h"
@implementation ObjcImagePainter
+(UIImage *)imagePainting: (UIImage *)image {
cv::Mat source_img;
UIImageToMat(image, source_img);
cv::Mat painted_img, gray_img, bin_img;
painted_img = source_img.clone();
cv::cvtColor(source_img, gray_img, cv::COLOR_RGBA2GRAY); // グレースケール化
cv::threshold(gray_img, bin_img, 1, 255, cv::THRESH_BINARY); // 二値化
std::vector<std::vector<cv::Point>> contours;
std::vector<cv::Vec4i> hierarchy;
cv::findContours(bin_img, contours, hierarchy, cv::RETR_EXTERNAL, cv::CHAIN_APPROX_SIMPLE); // 輪郭抽出
for( size_t i = 0; i< contours.size(); i++ ) {
// 塗りつぶし
cv::drawContours(painted_img, contours, i, cv::Scalar(0, 255, 0, 255), -1);
}
UIImage *dst_img = MatToUIImage(painted_img);
return dst_img;
}
@end
このプログラムでは、UIImageをObjective C++内でcv::Mat型（OpenCV C++の画像型）に変換して、画像処理を施した後、再度UIImageに戻してreturnしています。
SwiftとC++で画像処理
SwiftとC++で画像処理では、C++ interoperabilityという機能を使用してみました。プログラムは以下の通りです。（こちらのプログラムは、高解像度画像の場合、メモリ消費が大きくなるかもしれません。必要に応じて画像サイズを調整してください。）
ImageConverterView.swift
// 3.1 画像ステータスの取得
let pixelValues = originalImage.getPixelValueFromUIImage()
let channels = originalImage.getImageChannel()
let imageWidth = originalImage.cgImage!.width
let imageHeight = originalImage.cgImage!.height
// 3.2 Array<UInt8> (swift) -> std::vector<uint8_t> (c++)
var cxxVector = CxxImageProcessor.Vector()
for value in pixelValues {
cxxVector.push_back(value)
}
// 3.3 Image Processing in C++
let convertedPixelValues = Array<UInt8>(
cxxImageProcessor.process(cxxVector, Int32(channels), Int32(imageWidth), Int32(imageHeight))
)
// 3.4 Create UIImage from Array<UInt8>
let cxxPaintedImage = UIImage.arrayToImage(pixelValues: convertedPixelValues, width: imageWidth, height: imageHeight)
UIImage+.swift
import UIKit
extension UIImage {
func getImageChannel() -> Int {
guard let cgImage = self.cgImage else {
return 4
}
guard let colorSpace = cgImage.colorSpace else {
return 4
}
let colorSpaceModel = colorSpace.model
var channelCount: Int = 0
switch colorSpaceModel {
case .monochrome:
channelCount = 1
case .rgb:
channelCount = 3
default:
break
}
if cgImage.alphaInfo != .none && cgImage.alphaInfo != .noneSkipLast && cgImage.alphaInfo != .noneSkipFirst {
channelCount += 1
}
return channelCount
}
func getPixelValueFromUIImage() -> [UInt8] {
guard let cgImage = self.cgImage else { return [] }
let width = cgImage.width
let height = cgImage.height
let colorSpaceModel = cgImage.colorSpace?.model
var bytesPerPixel = 4
var bitmapInfo: UInt32 = CGImageAlphaInfo.premultipliedLast.rawValue
var colorSpace = CGColorSpaceCreateDeviceRGB()
switch colorSpaceModel {
case .monochrome:
bytesPerPixel = 1
bitmapInfo = CGImageAlphaInfo.none.rawValue
colorSpace = CGColorSpaceCreateDeviceGray()
case .rgb:
if cgImage.alphaInfo == .none {
bytesPerPixel = 3
bitmapInfo = CGImageAlphaInfo.noneSkipLast.rawValue | CGBitmapInfo.byteOrder32Big.rawValue
}
default:
break
}
let bytesPerRow = bytesPerPixel * width
let bitsPerComponent = 8
var pixelData = [UInt8](repeating: 0, count: width * height * bytesPerPixel)
// ビットマップコンテキストを作成
guard let context = CGContext(data: &pixelData,
width: width,
height: height,
bitsPerComponent: bitsPerComponent,
bytesPerRow: bytesPerRow,
space: colorSpace,
bitmapInfo: bitmapInfo) else { return [] }
// CGContextに画像を描画してピクセルデータを取得
context.draw(cgImage, in: CGRect(x: 0, y: 0, width: width, height: height))
return pixelData
}
static func arrayToImage(pixelValues: [UInt8], width: Int, height: Int) -> UIImage? {
let bytesPerPixel = 4
let bytesPerRow = bytesPerPixel * width
let bitsPerComponent = 8
// ピクセルデータを使ってCGImageを生成
guard let providerRef = CGDataProvider(data: Data(pixelValues) as CFData) else { return nil }
guard let cgim = CGImage(
width: width,
height: height,
bitsPerComponent: bitsPerComponent,
bitsPerPixel: bytesPerPixel * bitsPerComponent,
bytesPerRow: bytesPerRow,
space: CGColorSpaceCreateDeviceRGB(),
bitmapInfo: CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue),
provider: providerRef,
decode: nil,
shouldInterpolate: true,
intent: .defaultIntent
) else { return nil }
return UIImage(cgImage: cgim)
}
}
CxxImageProcessor.cpp
#include "CxxImageProcessor.hpp"
#import "IconPainter-Swift.h"
#import <opencv2/opencv.hpp>
std::vector<uint8_t> CxxImageProcessor::process(std::vector<uint8_t> pixel_values, int channel, int image_width, int image_height) {
cv::Mat src_img = array_to_Mat(pixel_values, image_width, image_height, channel);
cv::Mat origin_img, gray_img, bin_img, bin_inv_img;
origin_img = src_img.clone();
cv::cvtColor(src_img, gray_img, cv::COLOR_RGBA2GRAY);
cv::threshold(gray_img, bin_img, 1, 255, cv::THRESH_BINARY);
std::vector<std::vector<cv::Point>> contours;
std::vector<cv::Vec4i> hierarchy;
cv::findContours(bin_img, contours, hierarchy, cv::RETR_EXTERNAL, cv::CHAIN_APPROX_SIMPLE);
for( size_t i = 0; i< contours.size(); i++ ) {
cv::drawContours(origin_img, contours, i, cv::Scalar(0, 255, 0, 255), -1);
}
std::vector<uint8_t> outputPixelValues = Mat_to_array(origin_img);
return outputPixelValues;
}
cv::Mat CxxImageProcessor::array_to_Mat(std::vector<uint8_t> array, int width, int height, int channel) {
cv::Mat image;
if (channel == 4) {
image = cv::Mat(height, width, CV_8UC4, array.data());
cv::cvtColor(image, image, cv::COLOR_BGRA2RGBA); // RGBAの並びに変更
}
return image;
}
std::vector<uint8_t> CxxImageProcessor::Mat_to_array(cv::Mat image) {
std::vector<uint8_t> array;
array.assign(image.data, image.data + image.total() * image.elemSize());
return array;
}
CxxImageProcessor::CxxImageProcessor() {}
上記のプログラムでは、UIImageをC++にそのまま渡せないことを考慮して、UIImageの画像における色を1ピクセルずつ抽出して配列に格納しています。この配列をC++側に渡して、配列からcv::Mat型で画像を復元して、画像処理を施します。その後、画像処理を適用した画像における色を1ピクセルごとに抽出して再度配列に戻して、Swift側に渡します。そして、Swift側で配列からUIImageを復元することで画像処理を施したUIImageを取得できます。
まとめ
いかがだったでしょうか？本記事では、SwiftとC++を用いて画像処理を行う方法について紹介しました。記事を通して、Swiftを用いた画像処理の方法や、SwiftとC++の連携の方法について興味を持っていただけたら幸いです。