You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何正确实现视频特定区域模糊?iOS开发技术问询

视频特定区域模糊功能实现问题

我正在开发一个视频特定区域模糊的功能,当前设置了两个视图:一个用于在VideoView中展示视频,另一个用于标记模糊区域,但该模糊区域的位置显示不正确。希望了解实现视频特定区域模糊的正确方法,以下是我尝试的代码:

let asset = AVAsset(url: videoURL!)
titleComposition = AVMutableVideoComposition(asset: asset) { [self] request in
    let blurFilter = CIFilter(name: "CIGaussianBlur")
    blurFilter?.setValue(request.sourceImage, forKey: kCIInputImageKey)
    blurFilter?.setValue(100, forKey: "inputRadius")
     
    let blurImage = blurFilter?.outputImage
     
     DispatchQueue.main.async { [self] in
         //blurImage?.applyingGaussianBlur(sigma: 0.8)
         let resizedImaged = blurImage?.cropped(to:CGRect(origin: CGPoint(x: blurFrame.origin.x, y: blurFrame.origin.y), size: CGSize(width: blurFrame.width, height: blurFrame.height)))
         print("blurView position: \(blurView.frame.origin)")
         print("blurView size: \(blurView.frame.size)")
         print("resizedImage position: \(String(describing: resizedImaged?.extent.origin))")
         print("resizedImage size: \(String(describing: resizedImaged?.extent.size))")
         
         let compositedImage = resizedImaged?.composited(over: request.sourceImage)
         
        request.finish(with: compositedImage!, context: nil)
    }
}

相关截图:
模糊区域位置错误截图


问题分析与正确实现方案

现有代码的核心问题

  1. 错误使用主队列异步:AVMutableVideoComposition的渲染闭包本身在后台队列执行,用DispatchQueue.main.async包裹处理逻辑会导致渲染时机错乱,且request.finish必须在原闭包队列调用,不能延后到主队列。
  2. 坐标系统不匹配:UI视图的frame基于UIKit坐标系(原点左上角,y轴向下),而CIImage的extent基于Core Image坐标系(原点左下角,y轴向上),直接用blurFrame坐标裁剪会导致位置颠倒。
  3. 模糊合成逻辑错误:先模糊整个视频再裁剪区域,高斯模糊的边缘虚化会丢失过渡效果,应该先裁剪目标区域再模糊,最后合成回原视频。

正确实现步骤

  1. 坐标转换:将UI视图的blurFrame转换为Core Image坐标系下的区域,需考虑视频分辨率与UI视图的比例。
  2. 调整模糊逻辑:裁剪目标区域→模糊该区域→将模糊区域合成回原帧对应位置。
  3. 移除主队列异步:保持渲染逻辑在闭包原始队列执行,避免异步导致的渲染问题。

修正后的代码示例

let asset = AVAsset(url: videoURL!)
titleComposition = AVMutableVideoComposition(asset: asset) { [self] request in
    let sourceImage = request.sourceImage
    let videoExtent = sourceImage.extent
    
    // 1. 转换UI坐标到Core Image坐标
    let scaleX = videoExtent.width / videoView.bounds.width
    let scaleY = videoExtent.height / videoView.bounds.height
    // 翻转y轴适配Core Image坐标系
    let ciOriginY = videoExtent.height - (blurFrame.origin.y + blurFrame.height) * scaleY
    let ciBlurFrame = CGRect(
        x: blurFrame.origin.x * scaleX,
        y: ciOriginY,
        width: blurFrame.width * scaleX,
        height: blurFrame.height * scaleY
    )
    
    // 2. 裁剪需要模糊的区域
    guard let croppedImage = sourceImage.cropped(to: ciBlurFrame) else {
        request.finish(with: sourceImage, context: nil)
        return
    }
    
    // 3. 对裁剪区域应用模糊
    let blurFilter = CIFilter(name: "CIGaussianBlur")!
    blurFilter.setValue(croppedImage, forKey: kCIInputImageKey)
    blurFilter.setValue(100, forKey: kCIInputRadiusKey)
    guard let blurredImage = blurFilter.outputImage else {
        request.finish(with: sourceImage, context: nil)
        return
    }
    
    // 4. 将模糊后的图像合成回原帧对应位置
    let compositedImage = blurredImage.composited(over: sourceImage, at: ciBlurFrame.origin)
    
    request.finish(with: compositedImage, context: nil)
}

额外注意事项

  • 如果视频存在旋转方向(如竖屏拍摄),需额外处理视频的preferredTransform修正坐标转换,避免模糊区域偏移。
  • 测试时可打印转换前后的坐标值,对比视频帧extent与转换后的ciBlurFrame,确保区域匹配。

内容的提问来源于stack exchange,提问作者latest update Faisal Rana

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.29 22:00:33