使用圆角保存UIImage并使用Swift边框

时间:2015-01-13 20:05:45

标签: ios swift uiimage

我正在使用imagePickerController从用户库中选择一张图片。我需要在应用程序中保存带圆角和边框的图片。保存图像时,它会保存未经改动的图像。我假设我只是在改变视图而不是图像本身。有没有办法将图片保存为视图中可以看到的内容?

@IBOutlet var imageViewer: UIImageView!

func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [NSObject : AnyObject]) {
    var imagePicked = info[UIImagePickerControllerOriginalImage] as UIImage
    imageViewer.layer.cornerRadius = 10.0
    imageViewer.clipsToBounds = true
    imageViewer.layer.frame = CGRectInset(imageViewer.layer.frame, 20, 20)
    imageViewer.layer.borderColor = UIColor.purpleColor().CGColor
    imageViewer.layer.borderWidth = 2.0
    imageViewer.image = imagePicked

感谢您的帮助!

5 个答案:

答案 0 :(得分:7)

您需要执行的基本操作是:

  • 剪裁绘图区域以在没有角落的情况下绘制图像
  • 绘制图像
  • 配置笔触颜色等
  • 然后描绘用于裁剪的路径

    func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [NSObject : AnyObject]) {
      let borderWidth: CGFloat = 2.0
      let imagePicked = info[UIImagePickerControllerOriginalImage] as UIImage
    
      UIGraphicsBeginImageContextWithOptions(imageViewer.frame.size, false, 0)
    
      let path = UIBezierPath(roundedRect: CGRectInset(imageViewer.bounds, borderWidth / 2, borderWidth / 2), cornerRadius: 10.0)
      let context = UIGraphicsGetCurrentContext()
    
      CGContextSaveGState(context)
      // Clip the drawing area to the path
      path.addClip()
    
      // Draw the image into the context
      imagePicked.drawInRect(imageViewer.bounds)
      CGContextRestoreGState(context)
    
      // Configure the stroke
      UIColor.purpleColor().setStroke()
      path.lineWidth = borderWidth
    
      // Stroke the border
      path.stroke()
    
      roundedImage = UIGraphicsGetImageFromCurrentImageContext();
    
      UIGraphicsEndImageContext();
    
      view.addSubview(UIImageView(image: roundedImage))
    
      picker.dismissViewControllerAnimated(true, completion: nil)
    }
    

在上面的代码中,我将路径插入了一半的笔触宽度,因为笔划沿着路径的中心绘制,这意味着一个像素将最终在路径之外。

答案 1 :(得分:4)

Paul.s的答案是完美的(⬆️),但由于它只捕获UIImage相对于UIImageView的大小,因此可能会降低图像质量。假设您希望图像在框架内保持其纵横比,并且您希望边框直接位于其边缘,则可以执行此操作以保持整个图像的大小以进行保存:

func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [NSObject : AnyObject]) {

    let imagePicked = info[UIImagePickerControllerOriginalImage] as UIImage

    let borderWidth: CGFloat = 2.0
    let cornerRadius:CGFloat = 10.0

    // Create a multiplier to scale up the corner radius and border
    // width you decided on relative to the imageViewer frame such
    // that the corner radius and border width can be converted to
    // the UIImage's scale.
    let multiplier:CGFloat = imagePicked.size.height/imageViewer.frame.size.height > imagePicked.size.width/imageViewer.frame.size.width ?
       imagePicked.size.height/imageViewer.frame.size.height :
       imagePicked.size.width/imageViewer.frame.size.width

    let borderWidthMultiplied:CGFloat = borderWidth * multiplier
    let cornerRadiusMultiplied:CGFloat = cornerRadius * multiplier

    UIGraphicsBeginImageContextWithOptions(imagePicked.size, false, 0)

    let path = UIBezierPath(roundedRect: CGRectInset(CGRectMake(0, 0, imagePicked.size.width, imagePicked.size.height),
       borderWidthMultiplied / 2, borderWidthMultiplied / 2), cornerRadius: cornerRadiusMultiplied)

    let context = UIGraphicsGetCurrentContext()

    CGContextSaveGState(context)
    // Clip the drawing area to the path
    path.addClip()

    // Draw the image into the context
    imagePicked.drawInRect(CGRectMake(0, 0, imagePicked.size.width, imagePicked.size.height))
    CGContextRestoreGState(context)

    // Configure the stroke
    UIColor.blackColor().setStroke()
    path.lineWidth = borderWidthMultiplied

    // Stroke the border
    path.stroke()

    imageViewer.image = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    picker.dismissViewControllerAnimated(true, completion: nil)


}

答案 2 :(得分:0)

您目前正在做的是更改图像的显示,而不更改图像本身。您需要创建位图上下文(请参阅UIGraphicsBeginImageContextWithOptions);设置圆形直剪裁区域(CGContextEOClip);将您的图像绘制到上下文中;最后,从上下文(UIGraphicsGetImageFromCurrentImageContext

获取UIImage

答案 3 :(得分:0)

斯威夫特3:

     func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
        if let image = info[UIImagePickerControllerEditedImage] as? UIImage {
            let borderWidth: CGFloat = 2.0
               UIGraphicsBeginImageContextWithOptions(myImageButton.frame.size, false, 0)
                let path = UIBezierPath(roundedRect: myImageButton.bounds.insetBy(dx: borderWidth / 2, dy: borderWidth / 2), cornerRadius: 40.0)
                let context = UIGraphicsGetCurrentContext()
                context!.saveGState()
                path.addClip()
                image.draw(in: myImageButton.bounds)
                UIColor.gray.setStroke()
                path.lineWidth = borderWidth
                path.stroke()
                let roundedImage = UIGraphicsGetImageFromCurrentImageContext()
                UIGraphicsEndImageContext()

                myImageButton.setImage(roundedImage, for: .normal)
}
}

答案 4 :(得分:0)

带边框的圆形 UIImage:

extension UIImage {
    
    func roundedWithStroke(width: CGFloat = 3) -> UIImage {
        let imageLayer = CALayer()
        let targetSize = CGSize(width: 29, height: 29)

        imageLayer.frame = CGRect(x: 0, y: 0, width: targetSize.width, height: targetSize.height)
        imageLayer.contents = cgImage
        imageLayer.masksToBounds = true
        imageLayer.cornerRadius = targetSize.width / 2
        imageLayer.borderWidth = width
        imageLayer.borderColor = UIColor.mainAccent.cgColor
        
        UIGraphicsBeginImageContextWithOptions(targetSize, false, scale)
        imageLayer.render(in: UIGraphicsGetCurrentContext()!)
        let roundedImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        return roundedImage ?? UIImage()
    }
    
}

您可以修改扩展方法以传递您需要的参数。