UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

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      

TAKE YOUR SKILLS TO THE NEXT LEVEL If you like Hacking with Swift, you'll love Hacking with Swift+ – it's my premium service where you can learn advanced Swift and SwiftUI, functional programming, algorithms, and more. Plus it comes with stacks of benefits, including monthly live streams, downloadable projects, a 20% discount on all books, and free gifts!

Find out more

Sponsor Hacking with Swift and reach the world's largest Swift community!

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.