写真にマスクをかけて切り抜きをする

投稿日: 2011/01/31 作成者: masuda

久し振りに、美女Linux http://bijo-linux.com のブログパーツ作成です。
今回は、ブログパーツ自体をハートマークにしてしまおうという企画で、出来上がりはこんな感じ。

ここのブログだと、背景が白なので変わり映えしませんが、色がついていたり画像が貼ってあったりすると、透過されているのがよくわかります。

さて、これをどう実現するのかと言うと、って非常に簡単で。

  • ハートマークのフレームを用意します。
  • ハートマークに切り抜いた写真を用意します。
  • そして重ね合わせ

しているだけです。普通、写真のほうは四角形だったりするので、ブログパーツ自身も四角形になってしまうことが多いのですが、元の写真から切り抜いてしまえば、重ね合わせのときに両方とも背景が投下されます。

▼切り抜いた写真

▼フレーム画像

の重ね合わせです。

さて、この切り抜いた画像をどう作るかというと、マスク画像との重ね合わせになるわけですが、

▼元の写真

▼マスク画像

を使います。これを使って、ちまちま画像ツールでやってもいいんですが…ちょっとそれは無理ッ!!! なので、マスクするだけのツールを作りました。 

public class ImageOverlay
{
    public bool OverlayMask(string photofile, string maskfile, string outfile)
    {
        try
        {
            Bitmap photo = new Bitmap(photofile);
            Bitmap mask = new Bitmap(maskfile);
            Bitmap output = this.OverlayMask(photo, mask);
            if (output == null)
            {
                return false;
            }
            output.Save(outfile);
            return true;
        }
        catch
        {
            Console.WriteLine("can't make overlay file"); 
            return false;
        }
    }
    public Bitmap OverlayMask(Bitmap bmpPhoto, Bitmap bmpMask)
    {
        int width = bmpPhoto.Width;
        int height = bmpPhoto.Height;
        Bitmap bmpOutput = new Bitmap(width, height, PixelFormat.Format32bppArgb);

        for (int y = 0; y < width; y++)
        {
            for (int x = 0; x < height; x++)
            {
                Color photo = bmpPhoto.GetPixel(x, y);
                byte red = bmpMask.GetPixel(x, y).R;
                byte alpha = (byte)(255 - red);
                Color mask = Color.FromArgb(alpha, photo);
                bmpOutput.SetPixel(x, y, mask);
            }
        }
        return bmpOutput;
    }
}
  • photo: 元画像
  • mask: マスク画像
  • output: 出力画像

ってな訳で、ちまちまと1ドットずつ重ね合わせ…って、なんかいい方法ないですかね？

ImageAttributes クラス (System.Drawing.Imaging)
http://msdn.microsoft.com/ja-jp/library/h4f66d59.aspx

あたりで、alpha チャンネルを変えるだけでいいと思うだけど、まあ、これでもそれなりのスピードが出ているので良しとしますか(画像が大きくなるとちょっとアレなんでしょうが)。

カテゴリー: 開発, ブログパーツ パーマリンク