BLACK FRIDAY: Save 50% on all my Swift books and bundles! >>

SOLVED: Day 63 - Images rotate after applying CoreImage filter?

Forums > 100 Days of SwiftUI

Hi,

I have just followed the video on integrating coreImage with SwiftUI. When simply loading in the image from the asset catalogue directly, the image is normally displayed. But when I run the image through UIImage, CIImage, apply a CIFilter of any kind, convert it to a CGFilter, and back to a SwiftUI Image, image is rotated 90% with the filter.

I followed the video 1:1 and tried to do a simple copy/paste of Paul's code in a new SwiftUI file, and the image is still roated.

Any thoughts on this?

import CoreImage
import CoreImage.CIFilterBuiltins
import SwiftUI

//CoreImage is about changing EXISTING images - not drawing new ones.
//An example image has been added to assets catalogue...

//Three types of Image types (CGImage, CIImage, UIImage) are required to work with if CoreImage is to be used to work with images

struct ContentView: View {
    @State private var image: Image?

    var body: some View {
        VStack {
            image?
                .resizable()
                .scaledToFit()
        }
        .onAppear(perform: loadImage)
    }

    func loadImage() {
        //Make the Swift Image image into a UIImage
        let inputImage = UIImage(resource: .IMG_1475)

        //Make the UIImage into a CIImage
        let beginImage = CIImage(image: inputImage)

        //Make a CI filter
        let context = CIContext()
        let currentFilter = CIFilter.crystallize()

        //Apply current filter to image
        currentFilter.inputImage = beginImage

        //make an amount for manipulating the filter
        let amount = 1.0

        //read the parameters that any given CIFilter supports
        let inputKeys = currentFilter.inputKeys

        //Apply that filter with the supported inputKeys for the selected filter onto the CIImage
        if inputKeys.contains(kCIInputIntensityKey) {
            currentFilter.setValue(amount, forKey: kCIInputIntensityKey) }
        if inputKeys.contains(kCIInputRadiusKey) { currentFilter.setValue(amount * 200, forKey: kCIInputRadiusKey) }
        if inputKeys.contains(kCIInputScaleKey) { currentFilter.setValue(amount * 10, forKey: kCIInputScaleKey) }

        //Converting the outputImage with its new filter to a Swift Image

        //Make a CI outputImage or bail
        guard let outputImage = currentFilter.outputImage else { return }

        //Make a CG image on the CI outputImage or bail
        guard let cgImage = context.createCGImage(outputImage, from: outputImage.extent) else { return }

        //Convert the CGImage into a UIImage
        let uiImage = UIImage(cgImage: cgImage)

        //Convert the UIImage into a the Swift Image we use in our view above
        image = Image(uiImage: uiImage)
    }
}

1      

Try amending your code to this at the end, uiImage does some weird processing sometimes:

let uiImage = UIImage(cgImage: CGImage, scale: inputImage.scale, orientation: inputImage.imageOrientation)
image = Image(uiImage: outputImage)

2      

For anyone else running into this issue I added the following extension...

extension UIImage {
    func fixedOrientation() -> UIImage {
        if imageOrientation == .up {
            return self
        }

        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        draw(in: CGRect(origin: .zero, size: size))
        let normalizedImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()

        return normalizedImage
    }
}

I then added .fixedOrientation() to my inputImage & UIImage

guard let inputImage = UIImage(data: imageData)?.fixedOrientation() else { return }

&

let uiImage = UIImage(cgImage: cgImage).fixedOrientation()

   

Save 50% in my WWDC sale.

SAVE 50% All our books and bundles are half price for Black Friday, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.