イントロダクション
今回はPNGファイルの中身をのぞいて、プログラムで線を引く描画処理をしてみます。今までやってきたことは下のリンク参照で。。。
- Java OpenCV 環境セットアップ(on Mac)
- Java OpenCv Lv1 〜入門: 写真の表示〜
- Java OpenCV Lv2 〜画像を表示する〜
- Java OpenCV Lv3 〜画像の平滑化(smooth())〜
- Java OpenCV Lv3 〜画像にガウシアンフィルタ(GaussianBlur())〜
- Java OpenCV Lv3 〜画像に中央値フィルタ(medianBlur())〜
しかし、画像がぼやけた感じになったのはわかったのですが、処理としては何をしているのかいまいちわかりませんでした。
なので、今回は画像の中身をみてみようと思います。
今回のポイント
- 画像データはどんなものなのか?
- 画像のデータを操作するということは、何をすることか?
- 色はどんなデータ?
今回使用するイメージ(アイコン)ファイルは下のようなものです。
一発目のイメージファイル
<likeEye.png>: 10 x 10
そして、下のようなコードをみてください
package jp.zenryoku.opencv;
import org.opencv.core.Core;
import org.opencv.core.Mat;
import org.opencv.core.Size;
import org.opencv.imgcodecs.Imgcodecs;
import org.opencv.imgproc.Imgproc;
import jp.zenryoku.opencv.view.ViewFrame;
/**
* OpenCVで平滑化処理を行う。
*
* @author takunoji
* 2018/11/22
*/
public class OpenCVTest4 {
static {
// OpenCVのライブラリをロードする
// static {~}はMainメソッドの開始前に起動する、起動するプログラムで1つ定義可能
System.loadLibrary(Core.NATIVE_LIBRARY_NAME);
}
/**
* メインメソッド、書き方は決まっている。
* イメージファイルを読み込んでぼかす Imgproc.blur()
*
* @param argsプログラム引数
*/
public static void main(String[] args) {
// ファイルの読み込み
Mat src = Imgcodecs.imread(
OpenCVTest4.class.getClass().getResource("/images/likeEye.png").getPath());
System.out.println(src.dump());
// OpenCVTest3の一部をコメントアウト
// // 出力用変数
// Mat dst = new Mat();
// // ブラーする、種知力用の変数に値をセットする→「参照渡し」
// //Imgproc.blur(mat, source, new Size(2.0,2.0));
// // 中央値フィルタ
// Imgproc.medianBlur(src, dst, 7);
// // 自作のJFrame拡張クラス
// new ViewFrame(dst);
}
}
前回のコードの一部をコメントアウトして、Matクラスのメソッドで読み込んだPNGファイルの中身をコンソール出力します。結果は下に
[ 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255; 255, 255, 255, 255, 255, 255, 255, 255, 255, 0, 0, 0, 0, 0, 0, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255; 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255; 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255; 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255; 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255; 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255; 255, 255, 255, 255, 255, 255, 255, 255, 255, 0, 0, 0, 0, 0, 0, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255; 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255; 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255]
上の結果を見てみると、「;」で区切られた配列が10個あります。そして1行の配列長が30になっています。
二発目のイメージファイル
一発目のイメージファイルに線を一本引いてそれを表示したものです。
キャプチャーしたものを加工したので少し変ですが。。。一発目と同じ<10 x 10>のイメージです。
そして、中身のデータは以下。
[ 30, 30, 40, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255; 255, 255, 255, 30, 30, 40, 255, 255, 255, 0, 0, 0, 0, 0, 0, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255; 255, 255, 255, 255, 255, 255, 30, 30, 40, 255, 255, 255, 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255; 255, 255, 255, 0, 0, 0, 255, 255, 255, 30, 30, 40, 255, 255, 255, 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255; 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 30, 30, 40, 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255; 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 30, 30, 40, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255; 255, 255, 255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 30, 30, 40, 255, 255, 255, 255, 255, 255, 255, 255, 255; 255, 255, 255, 255, 255, 255, 255, 255, 255, 0, 0, 0, 0, 0, 0, 0, 0, 0, 255, 255, 255, 30, 30, 40, 255, 255, 255, 255, 255, 255; 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 30, 30, 40, 255, 255, 255; 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 30, 30, 40]
初めの2個だけ赤い文字にしました。ちなにみ初めのソースと違う部分は以下の赤い字の部分。
今日の学習ポイント
// ファイルの読み込み
Mat src = Imgcodecs.imread(
OpenCVTest4.class.getClass().getResource("/images/likeEye.png").getPath());
Point pt1 = new Point(0,0);
Point pt2 = new Point(10,10);
Imgproc.line(src, pt1, pt2, new Scalar(30, 30, 40));
System.out.println(src.dump());
出力した配列の中身は「1px目のR,G,B,2px....」と並んでいるようです。
[ 30, 30, 40, 255, 255, 255, 。。。
あと、線を引くときは「Imgproc.line()」を使用すれば良いことがわかりました。
ソースコードはGITからダウンロードできます。
余談
白い色は「255」で黒は「0」になっています。サンプルの画像とデータです。