| QQ扫一扫 | Demo |
|---|---|
|
|
|
实现方式
- 从相机里面拿到图
- 用opencv做边缘检测，拿到提取的边缘数据
- 给边缘上色，并且贴合到原图
- 使用一个gradiantlayer做动画
opencv - canny 边缘检测
这个动画里面最关键的一步是边缘检测，需要扣出图像中的边缘，在定义上是图像中明亮程度差异明显的点。
| 原图 | 边缘提取后 |
|---|---|
|
|
|
一般来说边缘提取在opencv里面常用的api/方法叫Canny算子。
边缘检测算法的指标需要关注三个问题：
1.错误率低：可以检测到真是的边缘（明亮度变化剧烈的点）
2.定位准确：找到的边缘和真实的边缘距离近
3.最小响应：被检测的时候，每一条边缘仅出现一次（同一边缘被检测时不会出现多个结果）
Canny目前是边缘检测表现最好的算法，他的工作步骤大概如下[1]：
1.应用高斯模糊，这一步在用使用canny api的时候需要我们自己做
2.找到图像中梯度（明亮程度）剧烈变化的地方
3.使用非极大值抑制，干掉被检测出来的重复的边缘/无法连成线的点
4.滞后回线，使用最大+最小阈值挑选出想要的边缘，对于Canny来说，一般 最大值：最小值的比例为3:1或者2:1，这一部分需要我们调用api的时候来操作。
代码
1. 边缘提取
- 将图片转换成mat，原图变成灰度图
- 对灰度图做高斯模糊
- 使用Canny提取，并指定高低阈值，阈值决定了提取的边缘有多少，放入edgemat
- 为了自定义边缘的绘制并上色，从edgemat中提取边缘的点在原图上进行重新绘制
- 将绘制好的image贴到相机上，因为image已经包含了绘制的边缘，所以看上去效果是贴合的。
- (UIImage *)processImage:(UIImage *)image {
// 传入uiimage
cv::Mat im;
UIImageToMat(image, im, 1);
// uiimage转mat
if(im.empty()) {
return nil;
}
cv::Mat src = im.clone();
cv::Mat src_gray;
// 原图变成灰度图
if (src.channels()==1)
{
src_gray = src;
}
if (src.channels() == 3)
{
cvtColor(src, src_gray, CV_BGR2GRAY);
}
if (src.channels() == 4)
{
cvtColor(src, src_gray, CV_BGRA2GRAY);
}
cv::Mat edgeMat;
// 对原图进行高斯模糊
cv::GaussianBlur(src_gray, src_gray, cv::Size(3,3), cv::BORDER_DEFAULT);
// 使用Canny进行边缘提取，提取出来的图像放在edgeMat, 后面连个参数是低+高阈值，影响到提取出来的边缘是多是少
cv::Canny(src_gray, edgeMat, self.lowThreshold, self.lowThreshold * 3);
// // 生成一张透明的mat
// cv::Mat dst = cv::Mat(src_gray.size(),CV_8UC4,cv::Scalar(0,0,0,0));;
std::vector> contours;
std::vector hierarchy;
// 将拿到的边缘提取成点，再做自定义绘制
cv::findContours(edgeMat, contours, hierarchy, CV_RETR_TREE, CV_CHAIN_APPROX_SIMPLE, cv::Point(0, 0));
UIImage *result;
// 将提取出来的边缘绘制在原图上，并且设置绘制的颜色，最后转成uiimage，贴合到相机的previewlayer上，就能看到提取绘制的边缘了
if (hierarchy.size() > 0) {
cv::Scalar color2(155, 240, 250, 255);
cv::drawContours( src, contours, -1, color2, -1, cv::LINE_4, hierarchy, INT_MAX, cv::Point(0,0));
result = MatToUIImage(src);
} else {
result = nil;
}
return result;
}
动画
- 首先是需要一个自定义相机，在相机的outputdelegate方法didOutputSampleBuffer中获取图片，处理，然后再讲处理好的图片放到一个imageview中进行展示。
- (void)captureOutput:(AVCaptureOutput *)output didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection {
UIImage *image = [self imageFromSampleBuffer:sampleBuffer];
UIImage *newImage = [self.cannyHelper processImage:image];
dispatch_async(dispatch_get_main_queue(), ^{
self.edgeImageView.image = newImage;
});
}
- 使用CAGradientLayer做动画
动画分为两个部分，首先是蓝色从上往下扫的部分，单独建立一个gradientlayer，其实就是一个渐变色的识图，然后让这个识图从上往下扫。
其次是边缘视图动画，也建一个gradientlayer，只是将这个gradientlayer设置为layer的mask，这样就可以让动画看起来是顶部末尾的边缘渐隐。
让后让两个gradientlayer同时一起做动画，基本就能达到效果了。
- (void)animationEdgeImageView {
UIColor *color1 = [UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0];
UIColor *color2 = [UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:1];
UIColor *color3 = [UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:1];
NSArray *colors = [NSArray arrayWithObjects:(id)color1.CGColor, color2.CGColor, color3.CGColor,nil];
NSArray *locations = [NSArray arrayWithObjects:@0.0,@0.5,@1.0, nil];
CAGradientLayer *gradientAnimLayer = [CAGradientLayer layer];
gradientAnimLayer.frame = CGRectMake(0, -self.view.frame.size.height, self.view.frame.size.width, self.view.frame.size.height);
[gradientAnimLayer setColors:colors];
gradientAnimLayer.locations = locations;
UIColor *color11 = [UIColor colorWithRed:(255/255.0) green:(255/255.0) blue:(255/255.0) alpha:0];
UIColor *color22 = [UIColor colorWithRed:(155/255.0) green:(240/255.0) blue:(240/255.0) alpha:1];
NSArray *colors2 = [NSArray arrayWithObjects:(id)color11.CGColor, color22.CGColor,nil];
NSArray *locations2 = [NSArray arrayWithObjects:@0.7,@1.0, nil];
CAGradientLayer *gradientColorLayer = [CAGradientLayer layer];
gradientColorLayer.frame = CGRectMake(0, -self.view.frame.size.height, self.view.frame.size.width, self.view.frame.size.height);
[gradientColorLayer setColors:colors2];
gradientColorLayer.locations = locations2;
self.edgeImageView.layer.mask = gradientAnimLayer;
[self.edgeImageView.layer addSublayer:gradientColorLayer];
CGPoint originPosition = CGPointMake(self.view.frame.size.width / 2, -self.view.frame.size.height/1.5);
CGPoint finalPosition = CGPointMake(self.view.frame.size.width / 2, self.view.frame.size.height * 1.5);
CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
maskLayerAnimation.fromValue = [NSValue valueWithCGPoint:originPosition];
maskLayerAnimation.toValue = [NSValue valueWithCGPoint:finalPosition];;
maskLayerAnimation.removedOnCompletion = NO;
maskLayerAnimation.duration = 4.0;
maskLayerAnimation.repeatCount = HUGE_VALF;
maskLayerAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[gradientAnimLayer addAnimation:maskLayerAnimation forKey:@"maskLayerAnimation"];
[gradientColorLayer addAnimation:maskLayerAnimation forKey:@"maskLayerAnimation"];
}
最后，代码在Github，来玩：）
- https://en.wikipedia.org/wiki/Canny_edge_detector