TEAM LICENSES: Save money and learn new skills through a Hacking with Swift+ team license >>

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      

Hacking with Swift is sponsored by Blaze.

SPONSORED Still waiting on your CI build? Speed it up ~3x with Blaze - change one line, pay less, keep your existing GitHub workflows. First 25 HWS readers to use code HACKING at checkout get 50% off the first year. Try it now for free!

Reserve your spot now

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.