UIImageを取得して黒い枠を付けるにはどうすればよいですか？

126

の境界を設定するにはどうすればよいUIImageですか？

iphone  ios  objective-c  uiimageview  uiimage 
— シェイ
ソース
（私がしたように）誰かがグーグル検索で聞こえてきて、UIImageViewにボーダーを追加しようとしている場合は、下部にある@mclinの答えを探してください。よく働く！
— Mahendra Liya 2015年

回答:

241

OS> 3.0でこれを行うことができます：

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

[imageView.layer setBorderColor: [[UIColor blackColor] CGColor]];
[imageView.layer setBorderWidth: 2.0];
— マクリン
ソース
1
上記のimageViewで画像をiAspectFitすると、画像は完全に表示されますが、画像の側面は空白のままになり、画像が横長の場合、画像の上部と下部にも同じことが起こります。境界線が設定されているため、空白スペースは醜く見えます。この問題に直面しましたか？そうならば、これを解決する方法を提案してください
— ミート
@Hamutsi imageView.image = myImage;
— カイルクレッグ
6
はい、できます。UIImageCoreGraphicsを使用して、のインスタンスをグラフィックスコンテキストに描画できます。
— マークアダムス
@rockstarが指摘するように、imageView.layer.masksToBounds = YES;を追加する必要がある場合があります。
— ビョルンロシュ14
このリンクは私が探していた解決策でした。
— GrandSteph 2014
67

これを行うには、新しい画像を作成します（この質問の他の投稿でも回答されています）。

- (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て境界線を設定します。

— マーカス・S・ザラ
ソース
どのようにして境界線の幅を指定しますか？
— Patrick
16
CGContextSetLineWidth
— Marcus S. Zarra
@ MarcusS.Zarra私はこの質問に答えたときにそれらが存在しなかったことに気づきましたが、この解決策はRetinaディスプレイを考慮していません。あなたがそれを修正することができれば、私は本当に感謝するでしょう:)
— ルーク
@lukechサンプルを修正する必要はありません。Retinaデバイスを使用している場合は、線の幅を広げてください。
— マーカスS.ザラ
2
sizeあなたは画像を保存するときに、それは320x480ピクセルの解像度ではなく、640x960で保存し、関係なく、あなたは網膜デバイスにしているかどうかの320×480です。
— ルーク
38 
#import <QuartzCore/CALayer.h>


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

このコードは、UIImageViewビューの境界線を追加するために使用できます。

— ファイザンリファイ
ソース
完璧！CGImageの煩わしさを経験する必要はありません。（境界線のある画像を保存する必要はありませんでした）。本当にありがとう！
— Septronic、2016年
13 
imageView_ProfileImage.layer.cornerRadius =10.0f;
imageView_ProfileImage.layer.borderColor = [[UIColor blackColor] CGColor];
imageView_ProfileImage.layer.borderWidth =.4f;
imageView_ProfileImage.layer.masksToBounds = YES;
— ビジェンドラ・シン
ソース
特にメモリ使用量に関しては、素晴らしいハックです。他の回答では、その境界を一時的に追加するだけで2倍のメモリが必要になります。プロのヒント-片側に境界線を追加するだけの場合は、境界も変更できます。正解です。
— judepereira 2017
11

画像のサイズがわかっている場合は、UIImageViewのレイヤーに境界線を追加するのが最適なソリューションです。実際には、単純にimageViewをx、y、image.size.width、image.size.heightに設定できます。

サイズが変更されている（またはAspectFitにスケーリングされている）動的に読み込まれた画像を含む固定サイズのImageViewがある場合、目的は、画像ビューのサイズを新しいサイズ変更された画像に変更することです。

これを行う最短の方法：

// 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にバンドルされています）。

— スコーピオンキング2k5
ソース
ありがとう@rafinskipg！とても有難い。
— ScorpionKing2k5
8

境界線を追加することはできませんが、これは同じ効果で機能します。この例の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];
— アンドリュージョンソン
ソース
これは私がやったことです。UIImageView少し大きいフレームカラーの中央に入れ子にしUIViewます。
— Ben Kreeger、
6

これらの答えはすべて正常に機能しますが、画像に四角形を追加します。形状（私の場合は蝶）があり、境界線（赤い境界線）を追加するとします。

2つの手順が必要です。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];

}

通常の蝶と赤枠の大きな蝶を追加しました。

— インコンティ
ソース
ここで赤い枠の幅を設定する方法はありますか？
— coder1010 2013年
5

境界線を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;

imageViewの原点を中央に設定してください。

— 極B
ソース
2

画像自体を操作することもできますが、UIImageViewを含むUIViewを追加して、背景を黒に変更する方がはるかに良い方法です。次に、そのコンテナービューのサイズをUIImageViewよりも少し大きく設定します。

— ケンダルヘルムステッターゲルナー
ソース
オンザフライで変化する異なるサイズの画像で動作しますか？UIImageViewは常に変化し、UIView？ps画像自体の操作は素晴らしいでしょう。
— Shay
含まれるビューのフレームを画像とともに調整する必要があります。両方のビューの中央プロパティを保存し、画像サイズを調整し、コンテナサイズを調整してから、両方の中央プロパティを再設定できます。
— Kendall Helmstetter Gelner
これは、CGでパスをなでるのとは対照的に、まさに私のやり方でした。ただ簡単に思えた。
— コーリーフロイド
2

別の方法は、デザイナーから直接行うことです。

画像を選択して、「IDインスペクターの表示」の下に移動します。

ここでは、「ユーザー定義のランタイム属性」を手動で追加できます。

layer.borderColor
layer.borderWidth


ここに画像の説明を入力してください

— ルカ・ダヴァンゾ
ソース
1
これは、CGColorが必要なため機能せず、XIBを介してUIColorのみを提供します
— コードスヌーカー
色は機能しませんが、黒のみが必要な場合-これは最も「コードの行」の効率的な答え= D
— soprof
1

//インポートする必要があります

QuartzCore/QuartzCore.h

境界線のImageViewの場合

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

[imageView.layer setBorderWidth: 2.0];

[imageView.layer setCornerRadius: 5.0];
— パンキー
ソース
1

この関数は、黒枠の画像を返します。これを試してください。

- (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;
}
— SachinVsSachin
ソース
グリッチを見つけた場合はお知らせください...私はそれを改善します
— SachinVsSachin
1

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
— コーディメイス
ソース
1

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

    }

}
— マヴリック・ラークソ
ソース
0

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 
}}
— プラナヴ・グプタ
ソース
-1

このメソッドを使用して、画像の外側に境界線を追加します。ボーダーの幅はboderWidth一定にカスタマイズできます。

スウィフト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;
}
— ミゲルイスラ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.