如何获取 UIImage 并给它一个黑色边框？

如何设置 UIImage的边界？

111787 次浏览
小开

您可以操作图像本身，但是更好的方法是添加一个包含 UIImageView 的 UIView，并将背景更改为黑色。然后将该容器视图的大小设置为略大于 UIImageView。

小开

您不能添加边框，但是这样可以达到同样的效果。你也可以把这个例子中的叫做 blackBG 的 UIView 变成一个带有边框图像和一个空白中间的 UIImageView，然后你就会有一个自定义的图像边框而不仅仅是黑色。

UIView *blackBG = [[UIView alloc] initWithFrame:CGRectMake(0,0,100,100)];


blackBG.backgroundColor = [UIColor blackColor];


UIImageView *myPicture = [[UIImageView alloc] initWithImage:
[UIImage imageNamed: @"myPicture.jpg"]];


int borderWidth = 10;


myPicture.frame = CGRectMake(borderWidth,
borderWidth,
blackBG.frame.size.width-borderWidth*2,
blackBG.frame.size.height-borderWidth*2)];


[blackBG addSubview: myPicture];
小开

你可以通过创建一个新的图片来做到这一点(这个问题也在你的其他帖子中得到了回答) :

- (UIImage*)imageWithBorderFromImage:(UIImage*)source;
{
CGSize size = [source size];
UIGraphicsBeginImageContext(size);
CGRect rect = CGRectMake(0, 0, size.width, size.height);
[source drawInRect:rect blendMode:kCGBlendModeNormal alpha:1.0];


CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 0.5, 1.0, 1.0);
CGContextStrokeRect(context, rect);
UIImage *testImg =  UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return testImg;
}

此代码将在图像周围生成一个粉红色边框。但是，如果你只是要显示边框，然后使用层的 UIImageView和设置其边框。

小开

使用 OS > 3.0，你可以这样做:

//you need this import
#import <QuartzCore/QuartzCore.h>


[imageView.layer setBorderColor: [[UIColor blackColor] CGColor]];
[imageView.layer setBorderWidth: 2.0];
小开

您可以向 UIImageView 添加边框，然后根据图像大小更改 UIimageView 的大小:

#import <QuartzCore/QuartzCore.h>




// adding border to the imageView
[imageView.layer setBorderColor: [[UIColor whiteColor] CGColor]];
[imageView.layer setBorderWidth: 2.0];


// resize the imageView to fit the image size
CGSize size = [image size];
float factor = size.width / self.frame.size.width;
if (factor < size.height / self.frame.size.height) {
factor = size.height / self.frame.size.height;
}


CGRect rect = CGRectMake(0, 0, size.width/factor, size.height/factor);
imageView.frame = rect;

确保将 image View 的原点设置为中心

小开 
#import <QuartzCore/CALayer.h>




UIImageView *imageView = [UIImageView alloc]init];
imageView.layer.masksToBounds = YES;
imageView.layer.borderColor = [UIColor blackColor].CGColor;
imageView.layer.borderWidth = 1;

此代码可用于添加 UIImageView视图边框。

小开

所有这些答案工作正常，但添加一个正确的形象。 假设您有一个形状(在我的例子中是一只蝴蝶) ，您想添加一个边框(红色边框) :

我们需要两个步骤: 1)获取图像，转换为 CGImage，传递给一个使用 CoreGraphics 在屏幕外绘制的函数，然后返回一个新的 CGImage

2)转换为 uiimage 返回并绘制:

// remember to release object!
+ (CGImageRef)createResizedCGImage:(CGImageRef)image toWidth:(int)width
andHeight:(int)height
{
// create context, keeping original image properties
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, width,
height,
8
4 * width,
colorspace,
kCGImageAlphaPremultipliedFirst
);


CGColorSpaceRelease(colorspace);


if(context == NULL)
return nil;


// draw image to context (resizing it)
CGContextSetInterpolationQuality(context, kCGInterpolationDefault);


CGSize offset = CGSizeMake(2,2);
CGFloat blur = 4;
CGColorRef color = [UIColor redColor].CGColor;
CGContextSetShadowWithColor ( context, offset, blur, color);


CGContextDrawImage(context, CGRectMake(0, 0, width, height), image);
// extract resulting image from context
CGImageRef imgRef = CGBitmapContextCreateImage(context);
CGContextRelease(context);
return imgRef;

}

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.


CGRect frame = CGRectMake(0,0,160, 122);
UIImage * img = [UIImage imageNamed:@"butterfly"]; // take low res OR high res, but frame should be the low-res one.
imgV = [[UIImageView alloc]initWithFrame:frame];
[imgV setImage: img];
imgV.center = self.view.center;
[self.view addSubview: imgV];


frame.size.width = frame.size.width * 1.3;
frame.size.height = frame.size.height* 1.3;
CGImageRef cgImage =[ViewController createResizedCGImage:[img CGImage] toWidth:frame.size.width andHeight: frame.size.height ];


imgV2 = [[UIImageView alloc]initWithFrame:frame];
[imgV2 setImage: [UIImage imageWithCGImage:cgImage] ];


// release:
if (cgImage) CGImageRelease(cgImage);


[self.view addSubview: imgV2];

}

我加了一只普通的蝴蝶和一只红边的大蝴蝶。

小开

如果您知道您的图像的尺寸，然后添加一个边界 UIImageView 的层是最好的解决方案 AFAIK。事实上，您可以简单地将 image 视图设置为 x，y，image. size.width，image. size.height

如果你有一个固定大小的 ImageView，动态加载的图像正在调整大小(或缩放到 AspectFit) ，那么你的目标是将图像视图的大小调整到新的调整大小的图像。

做到这一点的捷径是:

// containerView is my UIImageView
containerView.layer.borderWidth = 7;
containerView.layer.borderColor = [UIColor colorWithRed:0.22 green:0.22 blue:0.22 alpha:1.0].CGColor;


// this is the key command
[containerView setFrame:AVMakeRectWithAspectRatioInsideRect(image.size, containerView.frame)];

但是要使用 AVMakeRectWithAspectRatioInsideRect，您需要添加以下内容

#import <AVFoundation/AVFoundation.h>

导入语句到您的文件中，并且在您的项目中包含 AVFoundation 框架(与 SDK 捆绑在一起)。

小开

这个函数将返回你的图像与黑色边框尝试这个. . 希望这将有助于你

- (UIImage *)addBorderToImage:(UIImage *)image frameImage:(UIImage *)blackBorderImage
{
CGSize size = CGSizeMake(image.size.width,image.size.height);
UIGraphicsBeginImageContext(size);


CGPoint thumbPoint = CGPointMake(0,0);


[image drawAtPoint:thumbPoint];




UIGraphicsBeginImageContext(size);
CGImageRef imgRef = blackBorderImage.CGImage;
CGContextDrawImage(UIGraphicsGetCurrentContext(), CGRectMake(0, 0, size.width,size.height), imgRef);
UIImage *imageCopy = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();


CGPoint starredPoint = CGPointMake(0, 0);
[imageCopy drawAtPoint:starredPoint];
UIImage *imageC = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return imageC;
}
小开

//你需要进口

QuartzCore/QuartzCore.h

& 然后在边框中显示 ImageView

[imageView.layer setBorderColor: [[UIColor blackColor] CGColor]];


[imageView.layer setBorderWidth: 2.0];


[imageView.layer setCornerRadius: 5.0];
小开

另一种方法是直接从设计师那里做。

选择您的形象，并进入“显示身份检查员”下。

这里你可以手动添加“ 用户定义的运行时属性”:

layer.borderColor
layer.borderWidth


enter image description here

小开 
imageView_ProfileImage.layer.cornerRadius =10.0f;
imageView_ProfileImage.layer.borderColor = [[UIColor blackColor] CGColor];
imageView_ProfileImage.layer.borderWidth =.4f;
imageView_ProfileImage.layer.masksToBounds = YES;
小开

在 Swift 3中，可以看到如何处理 UIImage 本身:

let size = CGSize(width: image.size.width, height: image.size.height)
UIGraphicsBeginImageContext(size)
let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
image?.draw(in: rect, blendMode: .normal, alpha: 1.0)
let context = UIGraphicsGetCurrentContext()
context?.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 1)
context?.stroke(rect)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()


self.imageView.image = newImage
小开

对于那些在 UIImage 上寻找即插即用解决方案的人，我将 CodyMace 的答案作为一个扩展编写。

用法: let outlined = UIImage(named: "something")?.outline()

extension UIImage {


func outline() -> UIImage? {


let size = CGSize(width: self.size.width, height: self.size.height)
UIGraphicsBeginImageContext(size)
let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
self.draw(in: rect, blendMode: .normal, alpha: 1.0)
let context = UIGraphicsGetCurrentContext()
context?.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 1)
context?.stroke(rect)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()


return newImage


}


}
小开

我使用这个方法来添加边框 在图像之外。您可以自定义边框宽度的 boderWidth常数。

Swift 3

func addBorderToImage(image : UIImage) -> UIImage {
let bgImage = image.cgImage
let initialWidth = (bgImage?.width)!
let initialHeight = (bgImage?.height)!
let borderWidth = Int(Double(initialWidth) * 0.10);
let width = initialWidth + borderWidth * 2
let height = initialHeight + borderWidth * 2
let data = malloc(width * height * 4)


let context = CGContext(data: data,
width: width,
height: height,
bitsPerComponent: 8,
bytesPerRow: width * 4,
space: (bgImage?.colorSpace)!,
bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue);


context?.draw(bgImage!, in: CGRect(x: CGFloat(borderWidth), y: CGFloat(borderWidth), width: CGFloat(initialWidth), height: CGFloat(initialHeight)))
context?.setStrokeColor(UIColor.white.cgColor)
context?.setLineWidth(CGFloat(borderWidth))
context?.move(to: CGPoint(x: 0, y: 0))
context?.addLine(to: CGPoint(x: 0, y: height))
context?.addLine(to: CGPoint(x: width, y: height))
context?.addLine(to: CGPoint(x: width, y: 0))
context?.addLine(to: CGPoint(x: 0, y: 0))
context?.strokePath()


let cgImage = context?.makeImage()
let uiImage = UIImage(cgImage: cgImage!)


free(data)


return uiImage;
}
小开

我已经创建了一个类，它为 imageView h 添加了一个边框。使用这个类代替 UIImageView。我给出了一个4的空白。你可以按照自己的意愿给予。

class UIBorderImageView: UIView {


private lazy var imageView: UIImageView = {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFit
imageView.translatesAutoresizingMaskIntoConstraints = false
return imageView
}()


override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.White()
self.layer.borderColor = UIColor.GreyMedium().cgColor
self.layer.borderWidth = 1.0
self.layer.cornerRadius = 4.0
self.layer.masksToBounds = true
self.setUpViews()
}


required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}


private func setUpViews(){
self.addSubview(imageView)
self.addConstraintsWithFormat(format: "H:|-4-[v0]-4-|", views: imageView)
self.addConstraintsWithFormat(format: "V:|-4-[v0]-4-|", views: imageView)
}


func configureImageViewWith(image:UIImage){
self.imageview.image = image
}}

提交答案