QQ扫一扫	Demo

实现方式

1. 从相机里面拿到图
2. 用opencv做边缘检测，拿到提取的边缘数据
3. 给边缘上色，并且贴合到原图
4. 使用一个gradiantlayer做动画

opencv - canny 边缘检测

这个动画里面最关键的一步是边缘检测，需要扣出图像中的边缘，在定义上是图像中明亮程度差异明显的点。

原图	边缘提取后

一般来说边缘提取在opencv里面常用的api/方法叫Canny算子。

边缘检测算法的指标需要关注三个问题：
1.错误率低：可以检测到真是的边缘（明亮度变化剧烈的点）
2.定位准确：找到的边缘和真实的边缘距离近
3.最小响应：被检测的时候，每一条边缘仅出现一次（同一边缘被检测时不会出现多个结果）

Canny目前是边缘检测表现最好的算法，他的工作步骤大概如下[1]：
1.应用高斯模糊，这一步在用使用canny api的时候需要我们自己做
2.找到图像中梯度（明亮程度）剧烈变化的地方
3.使用非极大值抑制，干掉被检测出来的重复的边缘/无法连成线的点
4.滞后回线，使用最大+最小阈值挑选出想要的边缘，对于Canny来说，一般 最大值：最小值的比例为3:1或者2:1，这一部分需要我们调用api的时候来操作。

代码

1. 边缘提取

1. 将图片转换成mat，原图变成灰度图
2. 对灰度图做高斯模糊
3. 使用Canny提取，并指定高低阈值，阈值决定了提取的边缘有多少，放入edgemat
4. 为了自定义边缘的绘制并上色，从edgemat中提取边缘的点在原图上进行重新绘制
5. 将绘制好的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<std::vector<cv::Point>> contours;
    std::vector<cv::Vec4i> 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;
}

动画

1. 首先是需要一个自定义相机，在相机的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;
    });
}

2. 使用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，来玩：）

1. https://en.wikipedia.org/wiki/Canny_edge_detector