iOS-创建核心图像过滤器循环时保留原始图像

我遵循了这两个教程，并

我在vc1中有一个图像，我将其传递给vc2。vc2有两个图像视图：

originalImageView

显示vc1的原始图像，以及

filteredImageView

显示应用核心图像过滤器的新图像

filteredImageView

被锚定在

originalImageView

我还有一个滚动视图，我用as按钮创建coreImage过滤器，一旦按下按钮，新过滤器就会应用，过滤后的图像现在显示在

filteredImageView

中，它隐藏了

originalImageView

，因为它在它的下面

一旦用户按下包含过滤器的任何按钮，他们就无法返回原始图像

如何创建一个按钮，在scrollView中显示与所有过滤图像一起显示的原始图像？理想情况下，它将是第一张图像，因此一旦用户按下它，就会显示原始图像

let originalImageView: UIImageView = {
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.contentMode = .scaleAspectFill
    return imageView
}()

let filteredImageView: UIImageView = {
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.contentMode = .scaleAspectFill
    return imageView
}()

let scrollView: UIScrollView = {
    let scrollView = UIScrollView()
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.backgroundColor = .black
    return scrollView
}()

var originalImage: UIImage? // set from vc1

let ciFilterNames = [
    "CISharpenLuminance",
    "CIPhotoEffectChrome",
    "CIPhotoEffectFade",
    "CIPhotoEffectInstant",
    "CIPhotoEffectNoir",
    "CIPhotoEffectProcess",
    "CIPhotoEffectTonal",
    "CIPhotoEffectTransfer",
    "CISepiaTone"
]

override func viewDidLoad() {
    super.viewDidLoad()

    createAnchors()

    guard let originalImage = originalImage else { return }

    originaImage.image = originalImage

    var xCoord: CGFloat = 5
    let yCoord: CGFloat = 5
    let buttonWidth:CGFloat = 70
    let buttonHeight: CGFloat = 70
    let gapBetweenButtons: CGFloat = 5

    var itemCount = 0

    for i in 0..<ciFilterNames.count {

        itemCount = i

        let filterButton = UIButton(type: .custom)
        button.frame = CGRect(x: xCoord, y: yCoord, width: buttonWidth, height: buttonHeight)
        filterButton.tag = itemCount
        filterButton.addTarget(self, action: #selector(filterButtonPressed(_:)), for: .touchUpInside)
        filterButton.layer.cornerRadius = 7
        filterButton.clipsToBounds = true

        guard let openGLContext = EAGLContext(api: .openGLES3) else { return }
        let context = CIContext(eaglContext: openGLContext)

        // Create filters for each button
        let coreImage = CIImage(image: originalImage)
        let filter = CIFilter(name: "\(ciFilterNames[i])" )
        filter?.setDefaults()
        filter?.setValue(coreImage, forKey: kCIInputImageKey)

        if ciFilterNames[i] == "CISharpenLuminance" {
            filter?.setValue(0.8, forKey: kCIInputSharpnessKey)
        } else {
            filter?.setValue(1, forKey: kCIInputIntensityKey)
        }

        guard let output = filter?.value(forKey: kCIOutputImageKey) as? CIImage else { return }
        guard let cgimgresult = context.createCGImage(output, from: output.extent) else { return }
        let imageForButton = UIImage(cgImage: cgimgresult)
        filterButton.setBackgroundImage(imageForButton, for: .normal)

        // Add Buttons in the Scroll View
        xCoord += buttonWidth + gapBetweenButtons
        scrollView.addSubview(filterButton)
    }
}

@objc fileprivate func filterButtonPressed(_ sender: UIButton) {

    let button = sender as UIButton

    filteredImageView.image = button.backgroundImage( for: .normal)
}

func createAnchors() {

    view.addSubview(originalImageView)
    view.addSubview(filteredImageView)
    view.addSubview(scrollView)

    originalImageView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    originalImageView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    originalImageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
    originalImageView.widthAnchor.constraint(equalToConstant: view.frame.width).isActive = true
    originalImageView.heightAnchor.constraint(equalToConstant: view.frame.width).isActive = true

    filteredImageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
    filteredImageView.leadingAnchor.constraint(equalTo: originalImageView.leadingAnchor).isActive = true
    filteredImageView.widthAnchor.constraint(equalTo: originalImageView.widthAnchor).isActive = true
    filteredImageView.heightAnchor.constraint(equalTo: originalImageView.heightAnchor).isActive = true

    scrollView.topAnchor.constraint(equalTo: originalImageView.bottomAnchor, constant: 8).isActive = true
    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    scrollView.heightAnchor.constraint(equalToConstant: 80).isActive = true
}

let originalImageView:UIImageView={
让imageView=UIImageView（）
imageView.TranslatesAutoResizezingMaskintoConstraints=false
imageView.contentMode=.ScaleSpectFill
返回图像视图
}()
let filteredImageView:UIImageView={
让imageView=UIImageView（）
imageView.TranslatesAutoResizezingMaskintoConstraints=false
imageView.contentMode=.ScaleSpectFill
返回图像视图
}()
让滚动视图：UIScrollView={
让scrollView=UIScrollView（）
scrollView.TranslatesAutoResizezingMaskintoConstraints=false
scrollView.backgroundColor=.black
返回滚动视图
}()
变量原始图像：UIImage？//从vc1设置
设ciFilterNames=[
“顺时针照明”，
“CIPhotoEffectChrome”，
“CIPhotoEffectFade”，
“CIPhotoEffectInstant”，
“Ciphotoeffectinoir”，
“CIPhotoEffectProcess”，
“CiphotoEffectional”，
“CIPhotoEffectTransfer”，
“皮亚通”
]
重写func viewDidLoad（）{
super.viewDidLoad（）
createAnchors（）
guard let originalImage=originalImage else{return}
originalImage.image=originalImage
变量xCoord:CGFloat=5
让yCoord:CGFloat=5
let buttonWidth:CGFloat=70
let buttonHeight:CGFloat=70
让按钮之间的间隙：CGFloat=5
var itemCount=0
对于0..中的i，我使用了水平收集视图而不是滚动视图，并且内部视图第一次加载，我将vc1中的图像添加到
[UIImages]数组中
然后，我循环遍历所有CIFILtername并将它们添加到数组中，方法与我将它们添加到scrollView中的方法相同。这样做可以将原始图像作为第一个图像，并将所有过滤后的图像一起添加到collectionVIew中。我还只需要一个imageView

我在viewDidLoad中的注释中添加了这两个步骤

var collectionView: UICollectionView!

let originalImageView: UIImageView = {
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.contentMode = .scaleAspectFill
    return imageView
}()

var originalImage: UIImage? // set from vc1 or just use your own UIImage(named: "whatever") for this example
var tableData = [UIImage]()
let filterCell = "filterCell"

let ciFilterNames = [
    "CISharpenLuminance",
    "CIPhotoEffectChrome",
    "CIPhotoEffectFade",
    "CIPhotoEffectInstant",
    "CIPhotoEffectNoir",
    "CIPhotoEffectProcess",
    "CIPhotoEffectTonal",
    "CIPhotoEffectTransfer",
    "CISepiaTone"
]

override func viewDidLoad() {
    super.viewDidLoad()

    configureCollectionView()
    createAnchors()

    guard let originalImage = originalImage else { return }

    originaImage.image = originalImage

    // 1. this appends the originalImage as the very first cell
    tableData.append(originaImage)

    guard let openGLContext = EAGLContext(api: .openGLES3) else { return }
    let context = CIContext(eaglContext: openGLContext)

    for i in 0..<ciFilterNames.count {

        let coreImage = CIImage(image: tableData[0])
        let filter = CIFilter(name: "\(ciFilterNames[i])" )
        filter?.setDefaults()
        filter?.setValue(coreImage, forKey: kCIInputImageKey)

        if ciFilterNames[i] == "CISharpenLuminance" {
            filter?.setValue(0.8, forKey: kCIInputSharpnessKey)
        } else if ciFilterNames[i] == "CISepiaTone" {
            filter?.setValue(1, forKey: kCIInputIntensityKey)
        } else {
            filter?.value(forKey: kCIOutputImageKey) as! CIImage
        }

        guard let output = filter?.value(forKey: kCIOutputImageKey) as? CIImage else { return }
        guard let cgimgresult = context.createCGImage(output, from: output.extent) else { return }
        let newImageWithFilterApplied = UIImage(cgImage: cgimgresult)

        // 2. after each loop append the newImageWithFilterApplied to the rest of the cells
        tableData.append(newImageWithFilterApplied)
        collectionView.reloadData()
    }
}

func configureCollectionView() {
    let layout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
    layout.scrollDirection = .horizontal

    collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    collectionView.delegate = self
    collectionView.dataSource = self
    collectionView.alwaysBounceHorizontal = true
    collectionView.backgroundColor = .black
    collectionView.showsHorizontalScrollIndicator = false
    collectionView.register(FilterCell.self, forCellWithReuseIdentifier: filterCell)
}

func createAnchors() {

    view.addSubview(originalImageView)
    view.addSubview(collectionView)

    originalImageView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    originalImageView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    originalImageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
    originalImageView.heightAnchor.constraint(equalToConstant: view.frame.width).isActive = true

    collectionView.topAnchor.constraint(equalTo: originalImageView.bottomAnchor, constant: 10).isActive = true
    collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    collectionView.heightAnchor.constraint(equalToConstant: 80).isActive = true
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return tableData.count
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: 80, height: 80)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 10
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: filterCell, for: indexPath) as! FilterCell

    cell.imageView.image = tableData[indexPath.item]

    return cell
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    guard let cell = collectionView.cellForItem(at: indexPath) as? FilterCell else { return }
    guard let indexPath = collectionView.indexPath(for: cell) else { return }

    originalImageView.image = tableData[indexPath.item]
}

var collectionView:UICollectionView！
让originalImageView:UIImageView={
让imageView=UIImageView（）
imageView.TranslatesAutoResizezingMaskintoConstraints=false
imageView.contentMode=.ScaleSpectFill
返回图像视图
}()
var originalImage:UIImage？//从vc1设置，或者在本例中使用您自己的UIImage（名为“which”）
var tableData=[UIImage]（）
让filterCell=“filterCell”
设ciFilterNames=[
“顺时针照明”，
“CIPhotoEffectChrome”，
“CIPhotoEffectFade”，
“CIPhotoEffectInstant”，
“Ciphotoeffectinoir”，
“CIPhotoEffectProcess”，
“CiphotoEffectional”，
“CIPhotoEffectTransfer”，
“皮亚通”
]
重写func viewDidLoad（）{
super.viewDidLoad（）
configureCollectionView（）
createAnchors（）
guard let originalImage=originalImage else{return}
originalImage.image=originalImage
//1.这将原始图像附加为第一个单元格
tableData.append（原始图像）
让openGLContext=EAGLContext（api:.openGLES3）else{return}
let context=CIContext（eaglContext:openGLContext）
对于0..Int中的i{
return tableData.count
}
func collectionView（collectionView:UICollectionView，布局collectionViewLayout:UICollectionViewLayout，sizeForItemAt indexPath:indexPath）->CGSize{
返回CGSize（宽：80，高：80）
}
func collectionView（collectionView:UICollectionView，布局collectionViewLayout:UICollectionViewLayout，MinimumLineSpacingforSection:Int）->CGFloat{
返回10
}
func collectionView（collectionView:UICollectionView，cellForItemAt indexPath:indexPath）->UICollectionViewCell{
让cell=collectionView.dequeueReuseAbleCell（带ReuseIdentifier:filterCell，for:indexPath）作为！filterCell
cell.imageView.image=tableData[indexPath.item]
返回单元
}
func collectionView（collectionView:UICollectionView，didSelectItemAt indexPath:indexPath）{
guard let cell=collectionView.cellForItem（位于：indexPath）作为？FilterCell else{return}
guard let indexPath=collectionView.indexPath（for:cell）else{return}
originalImageView.image=tableData[indexPath.item]
}
您不需要有两个重叠的图像视图。相反，您可以有一个图像视图并保留两个图像。要更改当前图像，请使用UIImageViews的“image”属性，但在应用过滤器且用户希望返回到原始图像时，如何返回到原始图像？将原始图像存储在var中并进行设置想回来的时候就回来reset@Sh_Khan问题是原始图像没有与过滤器一起显示。我可以添加一个barButtonItem，当按下时会将其还原，但与显示原始图像和过滤图像相比，这似乎很奇怪。顺便说一句，将原始图像保留在完全独立的属性中是个好主意t滚动。尝试UITableView，其中每个图像都是一个单元格。感谢您回答您自己的问题（人们往往不知道您可以而且应该这样做）。如果您提供一些代码，我将很高兴对其进行投票。（我是真的。）