OpenCV4（7）-图像像素逻辑操作（C++，Python，JS） - 入门 - OpenCV - 人工智能 | Aayu Yain = 学无止境 = 世界上大部分事，都没太大意义。真理与热爱除外

# 环境

Python：3.6.5 OpenCV 4.1.2
C++：OpenCV 4.1.2
JS：OpenCV 4.5.0

环境搭建可参考：B 站视频

# 知识点

像素操作之逻辑操作

bitwise_and
bitwise_xor
bitwise_or

上面三个类似，都是针对两张图像的位操作

bitwise_not

针对输入图像，图像取反操作，二值图像分析中经常用

补充说明：图像像素值不是只有 0 和 1，当按位与操作时，结果取两者之间的较小值；按位或操作时，结果取两者间的较大值；异或操作时，结果取两者之间的差值，所以示例代码显示结果的重叠区域的差值为 0，所以是黑色～

有读者可能会疑惑，为什么按位与操作时，结果取两者之间的较小值？可以这样理解，把 0-255 转换成二进制后，再按位与操作，结果就是较小的那个值～

# C++ 代码

#ifndef DAY07
#define DAY07

#include <opencv2/opencv.hpp>
#include <iostream>

using namespace std;
using namespace cv;

void day07() {

	Mat src = imread("E:\\_Image\\OpenCVTest\\girl.jpg");
	if (src.empty()) {
		cout << "could not load image.." << endl;
		return;
	}
	imshow("input", src);

	// 取反操作
	Mat dst;
	bitwise_not(src, dst);
	imshow("dst", dst);

	// create image1
	Mat src1 = Mat::zeros(Size(400, 400), CV_8UC3);
	Rect rect(100, 100, 100, 100);
	src1(rect) = Scalar(0, 0, 255);
	imshow("input1", src1);

	// create image2
	Mat src2 = Mat::zeros(Size(400, 400), CV_8UC3);
	rect.x = 150;
	rect.y = 150;
	src2(rect) = Scalar(0, 0, 255);
	imshow("input2", src2);

	// 逻辑操作
	Mat dst1, dst2, dst3;
	bitwise_and(src1, src2, dst1);
	bitwise_xor(src1, src2, dst2);
	bitwise_or(src1, src2, dst3);

	// show results
	imshow("dst1", dst1);
	imshow("dst2", dst2);
	imshow("dst3", dst3);

	waitKey(0);
}

#endif // !DAY07

# Python 代码

	import cv2 as cv
	import numpy as np

	# 查看版本
	print(cv.__version__)

	# 创建图像 1
	src1 = np.zeros(shape=[400, 400, 3], dtype=np.uint8)
	src1[100:200, 100:200, 1] = 255
	src1[100:200, 100:200, 2] = 255
	cv.imshow("input1", src1)

	# 创建图像 2
	src2 = np.zeros(shape=[400, 400, 3], dtype=np.uint8)
	src2[150:250, 150:250, 2] = 255
	cv.imshow("input2", src2)

	# 进行逻辑运算
	dst1 = cv.bitwise_and(src1, src2)
	dst2 = cv.bitwise_xor(src1, src2)
	dst3 = cv.bitwise_or(src1, src2)

	# 显示结果
	cv.imshow("dst1", dst1)
	cv.imshow("dst2", dst2)
	cv.imshow("dst3", dst3)

	# 图像取反操作
	src = cv.imread("E:/_Image/OpenCVTest/girl.jpg")
	cv.imshow("input", src)
	dst = cv.bitwise_not(src)
	cv.imshow("dst", dst)

	# 等待键盘输入释放内存
	cv.waitKey(0)
	cv.destroyAllWindows()

# JS 代码

	<template>
	<div>
	<p>图像像素逻辑操作</p>
	<p id="status">OpenCV.js is loading...</p>
	<div class="inputoutput">
	<img id="imageSrc" src="imgs/girl.jpg" />
	</div>
	<div class="inputoutput">
	<canvas id="canvasOutput"></canvas>
	<div class="caption">canvasOutput</div>
	</div>
	</div>
	</template>

	<script>
	export default {
	name: "day07",
	mounted() {
	this.init();
	},
	methods: {
	init() {
	setTimeout(() => {
	if (window.cv) {
	this.onOpenCvReady(window.cv);
	} else {
	this.init();
	}
	}, 500);
	},
	onOpenCvReady(cv) {
	document.getElementById("status").innerHTML = "OpenCV.js is ready.";

	let src = cv.imread("imageSrc");
	let dst = new cv.Mat();

	// 官方文档链接：https://docs.opencv.org/4.5.0/dd/d4d/tutorial_js_image_arithmetics.html

	// 图像取反
	// cv.cvtColor(src, src, cv.COLOR_RGBA2RGB);
	// cv.bitwise_not(src, dst);

	// 创建图像 1
	let src1 = new cv.Mat(512, 512, cv.CV_8UC3);
	for (let i = 100; i < 200; i++) {
	for (let j = 100; j < 200; j++) {
	src1.ucharPtr(i, j)[0] = 255;
	src1.ucharPtr(i, j)[1] = 255;
	}
	}

	// 创建图像 2
	let src2 = new cv.Mat(512, 512, cv.CV_8UC3);
	for (let i = 150; i < 250; i++) {
	for (let j = 150; j < 250; j++) {
	src2.ucharPtr(i, j)[0] = 255;
	}
	}

	// 像素逻辑操作
	// cv.bitwise_and(src1, src2, dst)
	// cv.bitwise_or(src1, src2, dst)
	cv.bitwise_xor(src1, src2, dst);

	cv.imshow("canvasOutput", dst);

	src.delete();
	src1.delete();
	src2.delete();
	dst.delete();
	},
	},
	};
	</script>

	<style lang="scss" scoped>
	</style>