我正在使用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
感谢您的帮助!
答案 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
)
答案 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()
}
}
您可以修改扩展方法以传递您需要的参数。