Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

iOS

Posted by Marlon Henry
Marlon Henry
6,885 Points

Composite two images into one with text?

So I have two images that one of them I'm dragging on top of another with a touch gesture. All is fine the touch, but when I try to composite, it does not keep the draggable image in position of where I dragged it. What am I doing wrong?

here's my code:

 // Return composite image of image2 overlayed on image1
    //
func compositeImage(_ image1: UIImage, image2: UIImage, drawText: String, imageView1: CGPoint, imageView2:CGRect) -> UIImage {
            let catPos = (image1.size.height - imageView2.origin.y) - imageView2.height
            let bounds1 = CGRect(x: 0, y: 0, width: image1.size.width, height: image1.size.height)
            let bounds2 = CGRect(x:imageView2.origin.x, y:catPos, width:imageView2.size.width, height:imageView2.size.height)
            _ = CGColorSpaceCreateDeviceRGB()
            let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedFirst.rawValue)
            let ctx = CGContext(data: nil,
                                width: image1.cgImage!.width,
                                height: image1.cgImage!.height,
                                bitsPerComponent: image1.cgImage!.bitsPerComponent,
                                bytesPerRow: image1.cgImage!.bytesPerRow,
                                space: image1.cgImage!.colorSpace!,
                                bitmapInfo: bitmapInfo.rawValue)!
            ctx.draw(image1.cgImage!, in: bounds1, byTiling: false)
            ctx.setBlendMode(.normal) // one image over the other
            ctx.draw(image2.cgImage!, in: bounds2, byTiling: false)

           let finalImage = textToImage(drawText, inImage: UIImage(cgImage: ctx.makeImage()!), atPoint: imageView1)
            return finalImage
        }

           func textToImage(_ drawText: String, inImage: UIImage, atPoint: CGPoint) -> UIImage{

                // Setup the font specific variables
                let textColor = UIColor.white
                let textFont = UIFont(name: "Helvetica Bold", size: 17)!

                // Setup the image context using the passed image
                let scale = UIScreen.main.scale
                UIGraphicsBeginImageContextWithOptions(inImage.size, false, scale)

                // Setup the font attributes that will be later used to dictate how the text should be drawn
                let textFontAttributes = [
                    NSFontAttributeName: textFont,
                    NSForegroundColorAttributeName: textColor,
                    ] as [String : Any]

                // Put the image into a rectangle as large as the original image
                inImage.draw(in: CGRect(x: 0, y: 0, width: inImage.size.width, height: inImage.size.height))

                // Create a point within the space that is as bit as the image
                let rect = CGRect(x: atPoint.x, y: atPoint.y, width: inImage.size.width, height: inImage.size.height)

                // Draw the text into an image
                drawText.draw(in: rect, withAttributes: textFontAttributes)

                // Create a new image out of the images we have created
                let newImage = UIGraphicsGetImageFromCurrentImageContext()

                // End the context now that we have the image we need
                UIGraphicsEndImageContext()

                //Pass the image back up to the caller
                return newImage!

    }