I have a single image. And I have a collection view with banner images. Now,I need to combine these 2 images into single image without affecting their quality and height so that I could be able to download the merged image. I searched but couldn't find proper solutions for swift 3. My code is given as:
As per as your question You have to add two images and show up in a single UIImageView.
Here is a simple example of adding two images vertically and showing up in an UIImageView -
let topImage = UIImage(named: "image1.png") // 355 X 200
let bottomImage = UIImage(named: "image2.png") // 355 X 60
let size = CGSize(width: (topImage?.size.width)!, height: (topImage?.size.height)! + (bottomImage?.size.height)!)
UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
topImage?.draw(in: CGRect(x:0, y:0, width:size.width, height: (topImage?.size.height)!))
bottomImage?.draw(in: CGRect(x:0, y:(topImage?.size.height)!, width: size.width, height: (bottomImage?.size.height)!))
let newImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
// I've added an UIImageView, You can change as per your requirement.
let mergeImageView = UIImageView(frame: CGRect(x:0, y: 200, width: 355, height: 260))
// Here is your final combined images into a single image view.
mergeImageView.image = newImage
I hope it will help you to start with.
Related
I am working on creating a small word guessing app for a school assignment in uikit and I have been trying to figure out a way to overlay an image that updates based on the amount of incorrect guesses left on top of another image. I've spent almost 2 1/2 hours checking and I could not find a single method that worked.
So far this is what I've tried
let bgimg = UIImage(named: "background") // The image used as a background
let bgimgview = UIImageView(image: bgimg) // Create the view holding the image
bgimgview.frame = CGRect(x: 0, y: 0, width: 500, height: 500) // The size of the background image
let frontimg = UIImage(named: "Tree \(currentGame.incorrectMovesRemaining)") // The image in the foreground
let frontimgview = UIImageView(image: frontimg) // Create the view holding the image
frontimgview.frame = CGRect(x: 150, y: 300, width: 50, height: 50) // The size and position of the front image
bgimgview.addSubview(frontimgview) // Add the front image on top of the background
I commented this one out so that my code could work
let bottomImage = UIImage(named: "background")!
// let topImage = UIImage(named: "Tree \(currentGame.incorrectMovesRemaining)")!
// let rect = CGRect(origin: CGPoint(x: 0,y :0), size: CGSize(width: 100, height: 100))
// let newSize = rect.size // set this to what you need
// UIGraphicsBeginImageContextWithOptions(newSize, false, 0.0)
//
// bottomImage.draw(in: rect)
// topImage.draw(in: rect)
//
// let newImage = UIGraphicsGetImageFromCurrentImageContext()
// UIGraphicsEndImageContext()
// }
//
// var backgroundImageButton: UIButton! {
// backgroundImageButton.setBackgroundImage(newImage)
You should be able to do this by adjusting the alpha value of the foreground image view. Alpha controls the transparency of a view-- an alpha of 1.0 makes it opaque, a value of 0 is invisible, and values between 0 and 1 make a view more or less transparent. If you have the two image views aligned so that one covers the other, you can set the foreground image alpha to any value from 0 to 1 to adjust how transparent it is.
I've been trying to merge two images where one is on top and the other at the bottom. This code below doesn't seem to work. The x coordinator is correct but the y doesn't seem right and it crops the top image when I alter it. What am I doing wrong?
func combine(bottomImage: Data, topImage: Data) -> UIImage {
let bottomImage = UIImage(data: topImage)
let topImage = UIImage(data: bottomImage)
let size = CGSize(width: bottomImage!.size.width, height: bottomImage!.size.height + topImage!.size.height)
UIGraphicsBeginImageContext(size)
let areaSizeb = CGRect(x: 0, y: 0, width: bottomImage!.size.width, height: bottomImage!.size.height)
let areaSize = CGRect(x: 0, y: 0, width: topImage!.size.width, height: topImage!.size.height)
bottomImage!.draw(in: areaSizeb)
topImage!.draw(in: areaSize)
let newImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return newImage
}
You are drawing both images into the same rect. You also should not use force-unwrapping. That causes your app to crash if anything goes wrong.
There are also various other small mistakes.
Change your function like this:
// Return an Optional so we can return nil if something goes wrong
func combine(bottomImage: Data, topImage: Data) -> UIImage? {
// Use a guard statement to make sure
// the data can be converted to images
guard
let bottomImage = UIImage(data: bottomImage),
let topImage = UIImage(data: topImage) else {
return nil
}
// Use a width wide enough for the widest image
let width = max(bottomImage.size.width, topImage.size.width)
// Make the height tall enough to stack the images on top of each other.
let size = CGSize(width: width, height: bottomImage.size.height + topImage.size.height)
UIGraphicsBeginImageContext(size)
let bottomRect = CGRect(
x: 0,
y: 0,
width: bottomImage.size.width,
height: bottomImage.size.height)
// Position the bottom image under the top image.
let topRect = CGRect(
x: 0,
y: bottomImage.size.height,
width: topImage.size.width,
height: topImage.size.height)
bottomImage.draw(in: bottomRect)
topImage!.draw(in: topRect)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}
(And you should really be using a UIGraphicsImageRenderer rather than than calling UIGraphicsBeginImageContext()/ UIGraphicsEndImageContext().)
Edit:
Note that if the 2 images are different widths the above code will leave a "dead space" on the right of the narrower image. You could also make the code center the narrower image, or scale it up to be the same width. (If you do scale it up I suggest scaling it up in both dimensions to preserve the original aspect ratio. Otherwise it will look stretched and unnatural.)
I been trying to convert an UIImage to a matrix or a bitarray in swift but I don`t know how
import UIKit
import PlaygroundSupport
let bgimg = UIImage(named: "IMG_8565.JPG") // The image used as a background
let bgimgview = UIImageView(image: bgimg) // Create the view holding the image
bgimgview.frame = CGRect(x: 0, y: 0, width: 500, height: 500) // The size of the background image
let frontimg = UIImage(named: "spongebob.png") // The image in the foreground
let frontimgview = UIImageView(image: frontimg) // Create the view holding the image
frontimgview.frame = CGRect(x: 100, y: 200, width: 150, height: 150) // The size and position of the front image
bgimgview.addSubview(frontimgview) // Add the front image on top of the background
the last line contains the image and is what i`m trying to change into a matrix or a bitarray
also I know there are similar post but i hardly understand them, so please help me
mb you want just convert your image to the Data?
guard let image = UIImage(named: "IMG_8565.JPG") else { return }
guard let data = image?.jpegData(compressionQuality: 1.0) else { return }
compressionQuality: 1.0 - it's max quality for your image.
I want to add a logo as a background image to my tableView. Image size is 50px, 50px.
I tried the code below, but this puts the image lower right corner.
let imageView = UIImageView(image: UIImage(named: "logo"))
imageView.contentMode = .scaleAspectFit
imageView.layer.frame = CGRect(x: self.view.frame.midX, y: self.view.frame.midY, width: 50, height: 50)
let tableViewBackgroundView = UIView()
tableViewBackgroundView.addSubview(imageView)
self.tableView.backgroundView = tableViewBackgroundView
There are a few points about swift that are pretty key:
1) The x and y parameters in CGRect.init(x:y:width:height:) don't refer to the center of the imageView. Instead, they are points in a coordinate system where (0, 0) is the Upper Left Corner of the view that the CGRect is being presented over, and
2) UIImageView actually inherits from UIView, so because of this you can just say
tableView.backgroundView = imageView
You shouldn't have to fiddle around with any CGRects, I believe this code should work just fine, although you may have to fiddle with different contentMode properties to get it to display how you like.
let imageView = UIImageView(image: UIImage(named: "logo"))
imageView.layer.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
imageView.layer.frame.midX = tableView.layer.frame.midX
imageView.layer.frame.midY = tableView.layer.frame.midY
tableView.backgroundView = imageView
I've been using this function to combine two images together using CG rect:
let renderer = UIGraphicsImageRenderer(size: CGSize(width: frame.bounds.size.width, height: frame.bounds.size.height))
img = renderer.image { ctx in
let someSize = CGSize(width: imageView.bounds.size.width, height: imageView.bounds.size.height)
currentImage.scaleImageToSize(newSize: someSize).draw(in: CGRect(x: 0, y: 35, width: frame.bounds.size.width, height: imageView.bounds.size.height))
//textView?.draw(CGRect(x: 0, y: 0, width: textView.bounds.size.width, height: textView.bounds.size.height))
frames = UIImage(named: framesAr)
frames?.draw(in: CGRect(x: 0, y: 0, width: frame.bounds.size.width, height: frame.bounds.size.height))
}
I use this CGRect function to combines the currentImage (UIImage) and frame(UIImage) into a single UIImage no problem, but my attempts to add in a text view in the same fashion doesn't seem to be working.
I have a UITextView in front of an image for testing purposes. My hope was to be able to type text in the textView and use the commented out line in the above function to draw the entire textView and its contents in place.
When the image is saved the function runs, but the textView is simply ignored. Googling yields results on how to add strings to images, but not a user fillable textview in this fashion.
Any help would be greatly appreciated!
I founds a way that works, but its more of a workaround than anything else.
setup your textview like ichamps answer from this question:
How do I get text from a Swift textView?
then print the contents of the textview onto the image like this:
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .left
let attrs = [NSFontAttributeName: UIFont(name: "Avenir book", size: 14)!, NSParagraphStyleAttributeName: paragraphStyle]
let string = "\(myString)"
string.draw(with: CGRect(x: 0, y: 0, width: frame.bounds.size.width, height: frame.bounds.size.height), options: .usesLineFragmentOrigin, attributes: attrs, context: nil)