title: Resize and Crop 2 Images affected the original image quality
body: <p>Supposed that I have a UIImage's object on the UIViewController, and I want to set the image from the Controller. Basically what I want to do is, merging two images together, that the first image is the 5 star with blue color : </p>
  
  <p><a href="https://i.stack.imgur.com/vYU6X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vYU6X.png" alt="enter image description here"></a></p>
  
  <p>and the second image is the 5 star with grey color :</p>
  
  <p><a href="https://i.stack.imgur.com/Q4Ahk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q4Ahk.png" alt="enter image description here"></a></p>
  
  <p>It's intended for rating image. Since the maximum rating is 5, then I have to multiply it by 20 to get 100 point to make the calculation easier. Please see code for more details logic.</p>
  
  <p>So I have this (<strong>BM_RatingHelper.swift</strong>) :</p>
  
  <pre><code>static func getRatingImageBasedOnRating(rating: CGFloat, width: CGFloat, height: CGFloat) -&gt; UIImage {
      // available maximum rating is 5.0, so we have to multiply it by 20 to achieve 100.0 point
      let ratingImageWidth = ( width / 100.0 ) * ( rating * 20.0 )
  
      // get active rating image
      let activeRatingImage = BM_ImageHelper.resize(UIImage(named: "StarRatingFullActive")!, targetSize: CGSize(width: width, height: height))
      let activeRatingImageView = UIImageView(frame: CGRectMake(0, 0, ratingImageWidth, height));
      activeRatingImageView.image = BM_ImageHelper.crop(activeRatingImage, x: 0, y: 0, width: ratingImageWidth, height: height);
  
      // get inactive rating image
      let inactiveRatingImage = BM_ImageHelper.resize(UIImage(named: "StarRatingFullInactive")!, targetSize: CGSize(width: width, height: height))
      let inactiveRatingImageView = UIImageView(frame: CGRectMake(ratingImageWidth, 0, ( 100.0 - ratingImageWidth ), height));
      inactiveRatingImageView.image = BM_ImageHelper.crop(inactiveRatingImage, x: ratingImageWidth, y: 0, width: ( 100.0 - ratingImageWidth ), height: height);
  
      // combine the images
      let ratingView = UIView.init(frame: CGRect(x: 0, y: 0, width: width, height: height))
      ratingView.backgroundColor = BM_Color.colorForType(BM_ColorType.ColorWhiteTransparent)
      ratingView.addSubview(activeRatingImageView)
      ratingView.addSubview(inactiveRatingImageView)
  
      return ratingView.capture()
  }
  </code></pre>
  
  <p>The <code>BM_ImageHelper.swift</code> :</p>
  
  <pre><code>import UIKit
  
  class BM_ImageHelper: NSObject {
  
      // http://stackoverflow.com/questions/158914/cropping-an-uiimage
      static func crop(image: UIImage, x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat) -&gt; UIImage {
          let rect = CGRect(x: x, y: y, width: width, height: height)
          let imageRef = CGImageCreateWithImageInRect(image.CGImage, rect)!
          let croppedImage = UIImage(CGImage: imageRef)
          return croppedImage
      }
  
      // http://iosdevcenters.blogspot.com/2015/12/how-to-resize-image-in-swift-in-ios.html
      static func resize(image: UIImage, targetSize: CGSize) -&gt; UIImage {
          let size = image.size
          let widthRatio  = targetSize.width  / image.size.width
          let heightRatio = targetSize.height / image.size.height
  
          // Figure out what our orientation is, and use that to form the rectangle
          var newSize: CGSize
  
          if(widthRatio &gt; heightRatio) {
              newSize = CGSizeMake(size.width * heightRatio, size.height * heightRatio)
          } else {
              newSize = CGSizeMake(size.width * widthRatio,  size.height * widthRatio)
          }
  
          // This is the rect that we've calculated out and this is what is actually used below
          let rect = CGRectMake(0, 0, newSize.width, newSize.height)
  
          // Actually do the resizing to the rect using the ImageContext stuff
          UIGraphicsBeginImageContextWithOptions(newSize, false, 1.0)
          image.drawInRect(rect)
  
          let newImage = UIGraphicsGetImageFromCurrentImageContext()
          UIGraphicsEndImageContext()
  
          return newImage
      }
  }
  
  extension UIView {
  
      // http://stackoverflow.com/a/34895760/897733
      func capture() -&gt; UIImage {
          UIGraphicsBeginImageContextWithOptions(self.frame.size, self.opaque, UIScreen.mainScreen().scale)
          self.layer.renderInContext(UIGraphicsGetCurrentContext()!)
          let image = UIGraphicsGetImageFromCurrentImageContext()
          UIGraphicsEndImageContext()
  
          return image
      }
  
  }
  </code></pre>
  
  <p>I call that function like (supposed that the image need to filled is <code>ratingImage</code>) :</p>
  
  <pre><code>self.ratingImage.image =
      BM_RatingHelper.getRatingImageBasedOnRating(3.7, width: 100.0, height: 20.0)
  </code></pre>
  
  <p>The code works perfectly, but the merged image is so low in quality although I have use the high quality image. This is the image for 3.7 rating :</p>
  
  <p><a href="https://i.stack.imgur.com/j9Hra.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j9Hra.png" alt="enter image description here"></a></p>
  
  <p>What should I do to merge the images without lose the original quality? Thanks.</p>