ios - 透明なPNG画像をカラーとマージする方法

Question

drawInRectandで試してみましCGContextDrawImageたが、画像全体に適用されています。

透明部分ではなく、画像部分のみに適用したい。誰もそれを行う方法を知っていますか?

Answer 1

UIImage描画用のマスクとしてアルファチャンネルを使用できます。

Objective-C

- (UIImage *)overlayImage:(UIImage *)image withColor:(UIColor *)color
{
    //  Create rect to fit the PNG image
    CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);

    //  Start drawing
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);

    //  Fill the rect by the final color
    [color setFill];
    CGContextFillRect(context, rect);

    //  Make the final shape by masking the drawn color with the images alpha values
    CGContextSetBlendMode(context, kCGBlendModeDestinationIn);
    [image drawInRect:rect blendMode:kCGBlendModeDestinationIn alpha:1];

    //  Create new image from the context
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();

    //  Release context
    UIGraphicsEndImageContext();

    return img;
}

使用例:

UIImage *pngImage = [UIImage imageNamed:@"myImage"];
UIColor *overlayColor = [UIColor magentaColor];

UIImage *image = [self overlayImage:pngImage withColor:overlayColor];

スイフト3

extension UIImage {

    func overlayed(by overlayColor: UIColor) -> UIImage {
        //  Create rect to fit the image
        let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)

        // Create image context. 0 means scale of device's main screen
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0)
        let context = UIGraphicsGetCurrentContext()!

        //  Fill the rect by the final color
        overlayColor.setFill()
        context.fill(rect)

        //  Make the final shape by masking the drawn color with the images alpha values
        self.draw(in: rect, blendMode: .destinationIn, alpha: 1)

        //  Create new image from the context
        let overlayedImage = UIGraphicsGetImageFromCurrentImageContext()!

        //  Release context
        UIGraphicsEndImageContext()

        return overlayedImage
    }
}

使用例:

let overlayedImage = myImage.overlayed(by: .magenta)

---

編集：コメントでDesdenovaが指摘したように、私は質問を誤解しました。私の最初の答えは、色付きの背景の上に PNG を描画することでした。回答が編集されました。以下のコードは元のものです。

- (UIImage *)combineImage:(UIImage *)image withBackgroundColor:(UIColor *)bgColor
{
    //  Create rect to fit the PNG image
    CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);

    //  Create bitmap contect
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);

    // Draw background first

    //  Set background color (will be under the PNG)
    [bgColor setFill];

    //  Fill all context with background image
    CGContextFillRect(context, rect);

    //  Draw the PNG over the background
    [image drawInRect:rect];

    //  Create new image from the context
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();

    //  Release context
    UIGraphicsEndImageContext();

    return img;
}

Answer 2

助けてくれてありがとう...私は最終的に私のために働いたこのコードを試しました。

UIGraphicsBeginImageContext(firstImage.size);

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0, firstImage.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGRect rect = CGRectMake(0, 0, firstImage.size.width, firstImage.size.height);
// draw black background to preserve color of transparent pixels
CGContextSetBlendMode(context, kCGBlendModeNormal);
[[UIColor whiteColor] setFill];
CGContextFillRect(context, rect);
// draw original image
CGContextSetBlendMode(context, kCGBlendModeNormal);
CGContextDrawImage(context, rect, firstImage.CGImage);
// tint image (loosing alpha) - the luminosity of the original image is preserved
CGContextSetBlendMode(context, kCGBlendModeDarken);
[[UIColor colorWithPatternImage:secondImage] setFill];
CGContextFillRect(context, rect);
// mask by alpha values of original image
CGContextSetBlendMode(context, kCGBlendModeDestinationIn);
CGContextDrawImage(context, rect, firstImage.CGImage);
//[firstImage drawInRect:rect];

// image drawing code here
UIImage *coloredImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Answer 3

ボタンのクリックで以下のコードを適用して、透明な PNG を色で塗りつぶしました。

UIImage *colouredImage = _oldImageView.image;
colouredImage = [colouredImage imageTintedWithColor:[UIColor colorWithRed:99/255.0 green:4/255.0 blue:96/255.0 alpha:1.0]];
_oldImageView.image = colouredImage;

Answer 4

私もこの問題に遭遇しました.@Lukas Kukackaの回答は素晴らしい解決策だと思います. このソリューションにもう少し追加したいので、カテゴリを使用することをお勧めします。なぜカテゴリー？私の場合、この「メソッド」を複数のクラスで使用しているため、同じコードを複数回記述する代わりに、1 回だけ実行します。

コードを見てみましょう: これは UIImage+OverlayTintColor.h になります

#import <UIKit/UIKit.h>

@interface UIImage (OverlayTintColor)
- (UIImage *)overlayTintColor:(UIColor *)tintColor;

@end

これは UIImage+OverlayTintColor.m になります。

#import "UIImage+OverlayTintColor.h"

@implementation UIImage (OverlayTintColor)

- (UIImage *)overlayTintColor:(UIColor *)tintColor{

        //  Create rect to fit the PNG image
        CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);

        //  Start drawing
        UIGraphicsBeginImageContext(rect.size);
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSaveGState(context);

        //  Fill the rect by the final color
        [tintColor setFill];
        CGContextFillRect(context, rect);

        //  Make the final shape by masking the drawn color with the images alpha values
        CGContextSetBlendMode(context, kCGBlendModeDestinationIn);
        [self drawInRect: rect blendMode:kCGBlendModeDestinationIn alpha:1];

        //  Create new image from the context
        UIImage *img = UIGraphicsGetImageFromCurrentImageContext();

        //  Release context
        UIGraphicsEndImageContext();

        return img;
}

@end

使用法:(使用するクラスの上部にカテゴリをインポートすることを忘れないでください)

#import "UIImage+OverlayTintColor.h"


.......



 UIImage *image=[[UIImage imageNamed:@"test.png"] overlayTintColor:[UIColor blueColor]];