2010/10/19

画像を透明度エフェクト付きで合成

Imageユニットによる画像の合成処理では、合成する画像に加工を施すことで、下図のようなエフェクト付きの合成も実現できます。
この例の画像は、下記のようなスクリプトで作成できます。(画像のパスなどの部分は適宜変更してください)
var Image=require('Image').Image;
var img=Image.load('input.jpg');
var logo=Image.load("logo.png");

var mask=Image.create(32,32);
mask.fillEllipse(4,4,24,24,"white");
mask.blur(5);
logo.updateAlpha(mask);

img.drawImage(logo,img.width-logo.width-16,16);

img.save('output.jpg',{quality:90});
free(mask,logo,img);
元画像と合成するロゴ画像を読み込んだら、ロゴ画像と同じ大きさのマスク用Imageオブジェクトを生成し、fillEllipse()で円を描画します。
次に、blur()メソッドで円をぼかします。マスク画像の白い円の部分以外は透明ですので、円周の付近では不透明と透明が混じって段階的に半透明になります。
これを引数として、ロゴ画像のupdateAlpha()メソッドを呼び出すと、不透明度情報がコピーされ、周辺が徐々に透明になるロゴ画像が出来上がります。
これを合成先の画像のdrawImage()メソッドで合成すれば出来上がりです。

0 件のコメント:

コメントを投稿