画像処理についてあれこれ: ぼかし

Showing posts with label ぼかし. Show all posts

Monday, July 13, 2009

ImageMagickとPHPで背景がぼやける半透明グラデーションを描画する

Imagickで背景がぼやける半透明グラデーションを描画するには、以下のコードを実行します。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" 
  xml:lang="ja" dir="ltr">
<head>
<title>sample1132(ImageMagick6.5.2)</title>
</head>
<body>
<?php
$hpad = 20;
$im = new Imagick("sf.jpg");
$iw = $im->getImageWidth();
$ih = $im->getImageWidth();
$im2 = $im->clone();
$im2->cropImage($iw-$hpad*2, $ih, $hpad, 0);
$im2->blurImage(0, 5);
$im3 = new Imagick();
$im3->newPseudoImage($iw-$hpad*2, $ih,
  "gradient:#00000010-#00000070");
$im2->compositeImage($im3, Imagick::COMPOSITE_OVER, 
  0, 0, Imagick::CHANNEL_ALL);

$im->compositeImage($im2, Imagick::COMPOSITE_OVER, 
  $hpad, 0, Imagick::CHANNEL_ALL);
$im->writeImage('sample1132a.png');

$im->destroy();
?>
<img src="sample1132a.png" /><br />

</body>
</html>

元画像(sf.jpg)

出力画像(sample1132a.png)

Tuesday, June 23, 2009

ImageMagickとPHPで回転させたぼかし四角で画像を切り取る

Imagickで回転させたぼかし四角で画像を切り取るには、以下のコードを実行します。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja"
 xml:lang="ja" dir="ltr">
<head>
<title>sample1128(ImageMagick6.5.2)</title>
</head>
<body>
<?php
$im = new Imagick("sf.jpg");
$iw = $im->getImageWidth();
$ih = $im->getImageHeight();
$im2 = new Imagick();
$im2->newImage($iw, $ih, "none");
$im2->setImageVirtualPixelMethod(Imagick::VIRTUALPIXELMETHOD_TRANSPARENT);
$im2->setImageMatte(true);
$idraw = new ImagickDraw();
$idraw->setFillColor("blue");
$rx = $iw/2;
$ry = $ih/4;
$rw = $iw/2;
$rh = $ih/2;
$idraw->rectangle($rx,$ry,$rx+$rw,$ry+$rh);
$im2->drawImage($idraw);
$args1 = array($rx+$rw/2, $ry+$rh/2, 1, -30);
//$im->distortImage(Imagick::DISTORTION_SCALEROTATETRANSLATE,
// $args1, false);
// ScaleRotateTranslateDistortion in distort.h
$im2->distortImage(3, $args1, false);
$im2->blurImage(0, 10);
$im2->compositeImage($im, Imagick::COMPOSITE_IN, 0, 0,
Imagick::CHANNEL_ALL);
$im2->writeImage('sample1128a.png');
$idraw->destroy();
$im2->destroy();
$im->destroy();
?>
<img src="sample1128a.png" /><br />

</body>
</html>

元画像(sf.jpg)

出力画像(sample1128a.png)

関連項目
ImageMagickとPHPで画像を回転させる - その２

Tuesday, May 19, 2009

RMagickでぼやけた円をランダムに描画する

RMagickでぼやけた円をランダムに描画するには、以下のコードを実行します。


require 'RMagick'
include Magick

images = ImageList.new("sf.jpg")
10.times {
  images2 = ImageList.new
  images2.new_image(images.columns, images.rows){
    self.background_color = "none"
  }
  images2.alpha = ActivateAlphaChannel
  dr = Draw.new
  cx = rand() * images.columns
  cy = rand() * images.columns
  rv = rand()
  dr.fill = "#ffffff80"
  rad = 40*rv
  dr.ellipse(cx, cy,rad, rad, 0, 360)
  dr.draw(images2);
  images[0] = images.composite(
    images2.blur_channel(0,7*rv,AllChannels), 
    CenterGravity, 0, 0, 
    OverCompositeOp)
}
images.write("sample1089a.png")

exit

元画像(sf.jpg)

出力画像(sample1089a.png)

動作環境
ruby1.8.6, rmagick2.9.0

Thursday, April 30, 2009

ScriptomとImageMagickで画像をぼかす

ScriptomとImageMagickで画像をぼかすには、以下のコードを実行します。


import org.codehaus.groovy.scriptom.*

Scriptom.inApartment
{
im  = new ActiveXObject("ImageMagickObject.MagickImage.1")
im.convert("sf.jpg", "-blur", "0x5", "sample1072a.png")
}

元画像(sf.jpg)

出力画像(sample1072a.png)

動作環境
Groovy1.6.0, JDK1.6 Update12, ImageMagick6.5.0, Microsoft VC++ 2008 Redistributable
※ImageMagickインストール時にCOMインターフェイスも入れておくこと。

Wednesday, April 22, 2009

groovyでシェイプをぼかす

groovyでシェイプをぼかすには、以下のコードを実行します。


import groovy.swing.j2d.*

def gr = new GraphicsRenderer()
imgb = gr.render(200, 200){
 antialias("on")
 butterflyShape( x: 10, y: 10, width: 180, height: 180,
   fill: color("#bbddff"),
   borderColor: color("#103080"),
   borderWidth: 2
 )
}
gr.renderToFile("sample946a.png", 200, 200){
 antialias("on")
 rect( x: 0, y: 0, width: 200, height: 200,
   borderColor: no){
   texturePaint(x: 0, y: 0, image: imgb )
   filters {
     gaussianBlur(radius:10)
   }
 }
}

出力画像(sample946a.png)

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyで画像をぼかす

Wednesday, March 04, 2009

groovyで画像をぼかす：その２

groovyで画像をぼかすには、以下のコードを実行します。


import groovy.swing.j2d.*

def gr = new GraphicsRenderer()
gr.renderToFile("sample821a.png", 200, 200){
antialias("on")
rect( x: 0, y: 0, width: 200, height: 200, borderColor: no){
  texturePaint(x: 0, y: 0, file: 'sf.jpg' )
  filters(){ blur() }
}
}

元画像(sf.jpg)

出力画像(sample821a.png)

動作環境
Groovy1.6.0 Beta2, JDK1.6 Update11

関連項目
groovyで画像をぼかす

Thursday, February 19, 2009

RMagickで画像を２値化で切り取って、白背景でぼかすには、以下のコードを実行します。

require 'RMagick'
include Magick

# 画像を２値化して切り取って白背景と合成してからぼかす
images1 = ImageList.new("sample5r.jpg")
images1[0] = images1.threshold(MaxRGB*0.85).negate(true)
images1.alpha = ActivateAlphaChannel
images1[0] = images1.fx("p.r==1?1:0", AlphaChannel)
images2 = ImageList.new("sample5r.jpg")
img = images1.composite(images2, 0, 0, SrcInCompositeOp);
img2 = Image.new(img.columns, img.rows){
self.background_color = "white"
}
img3 = img2.composite(img, CenterGravity, 0, 0, OverCompositeOp);
img4 = img3.blur_channel(0, 2, ChannelType::AllChannels)

img4.write("sample778a.png")

exit
元画像(sample5r.jpg)

出力画像(sample778a.png)

動作環境
ruby1.8.6, rmagick2.7.1

関連項目
ImageMagickで、2値化して画像を切り取って白背景でぼかす (convertコマンドでの同様の処理)

Saturday, February 14, 2009

groovyで画像をぼかす

groovyで画像をぼかすには、以下のコードを実行します。


import groovy.swing.j2d.*

def gr = new GraphicsRenderer()
gr.renderToFile("sample875a.png", 200, 200){
antialias("on")
rect( x: 0, y: 0, width: 200, height: 200,
 borderColor: no){
 texturePaint(x: 0, y: 0, file: 'sf.jpg' )
 filters {
   gaussianBlur(radius:4)
 }
}
}

元画像(sf.jpg)

出力画像(sample875a.png)

動作環境
Groovy1.6.0 Beta2, JDK1.6 Update11

関連項目
groovyで画像をぼかす：その２
groovyでシェイプをぼかす
groovyで画像にスマート・ブラーをかける

Tuesday, January 13, 2009

groovyで画像にスマート・ブラーをかける

groovyで画像にスマート・ブラーをかけるには、以下のコードを実行します。


import groovy.swing.j2d.*

def gr = new GraphicsRenderer()
gr.renderToFile("sample860a.png", 200, 200){
 antialias("on")
 rect( x: 0, y: 0, width: 200, height: 200,
   borderColor: no){
   texturePaint(x: 0, y: 0, file: 'sf.jpg' )
   filters {
// なだらかな所にぼかしをかける
     smartBlur(threshold:30, hRadius:3, vRadius:3)
   }
 }
}

元画像(sf.jpg)

出力画像(sample860a.png)

動作環境
Groovy1.6.0 Beta2, JDK1.6 Update11

関連項目
groovyで画像をさまざまなパターンで塗りつぶす
groovyで画像に水面の波紋のような効果をかける

Wednesday, December 31, 2008

groovyで画像に放射ブラーをかける

groovyで画像に放射ブラーをかけるには、以下のコードを実行します。


import groovy.swing.j2d.*

def gr = new GraphicsRenderer()
gr.renderToFile("sample851a.png", 300, 225){
antialias("on")
rect( x: 0, y: 0, width: 300, height: 225,
 borderColor: no){
 texturePaint(x: 0, y: 0, file: 'sf2.jpg' )
 filters {
   motionBlur(angle:0, distance:1.0,
     rotation:0, zoom:0.1, wrapEdges:false)
 }
}
}

元画像(sf.jpg)

出力画像(sample851a.png)

動作環境
Groovy1.6.0 Beta2, JDK1.6 Update11

関連項目
Java2DとJava Image Filters(pixels)を使用して放射ブラーをかける

Tuesday, December 02, 2008

librsvgを使用して、画像に半透明ぼかしの文字列を描画する

librsvgを使用して、画像に半透明ぼかしの文字列を描画するには、以下のsvgファイルを処理します。

blurred-text.svg


<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="200" height="200">

<defs>
 <g id="mes">
   <text x="3%" y="65%" font-family="Arial" font-size="30"
     fill="#ffffff" fill-opacity="0.8" filter="url(#gbf)">San Francisco
   </text>
 </g>
 <filter id="btf" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" >
   <feImage xlink:href="#mes" result="mes"/>
   <feGaussianBlur in="mes" stdDeviation="1.5" result="bt"/>
   <feComposite in="bt" in2="SourceGraphic" operator="over" />
 </filter>
</defs>

<image x="0" y="0" width="200" height="200"
 xlink:href="sf.jpg" filter="url(#btf)">
 <title>sf.jpg</title>
</image>
</svg>

コマンド
rsvg-convert blurred-text.svg -f png -o sample700.png

元画像(sf.jpg)

出力画像(sample700.png)

○関連情報
・libsvgに関する他の記事はこちらを参照してください。

Thursday, November 27, 2008

Python Imaging Libraryで画像を円形にぼかす

Python Imaging Libraryで画像を円形にぼかすには、以下のコードを実行します。


# coding=UTF-8
import Image
import ImageDraw
import math

# 画像のぼけた円で切り取る
#xx=i/w-.5; yy=j/h-.5; rr=xx*xx+yy*yy; 1-rr*4
img1 = Image.open("sf.jpg")
img2 = Image.new("L", img1.size, 1)
for ly in range(img2.size[1]):
 for lx in range(img2.size[0]):
  img2.putpixel((lx,ly),
  int((1-(pow(lx/float(img2.size[0])-0.5, 2)+
  pow(ly/float(img2.size[1])-0.5, 2))*4)*255))
img1.putalpha(img2)
# pngで保存
img1.save("sample652a.png")

# 白背景と合成してjpegで保存
img3 = Image.new("RGB", img1.size, "#ffffff")
img3.paste(img1, mask=img1)
img3.save("sample652b.jpg")

元画像(sf.jpg)

出力画像1(sample652a.png)

出力画像2(sample652b.jpg)

Wednesday, November 26, 2008

Python Imaging Libraryで画像の端を半透明にぼかす

Python Imaging Libraryで画像の端を半透明にぼかすには、以下のコードを実行します。


# coding=UTF-8
import Image
import ImageDraw
import math

# 画像の端を半透明にしてぼかし
img1 = Image.open("sf.jpg")
img2 = Image.new("L", img1.size, 1)
for ly in range(img2.size[1]):
 for lx in range(img2.size[0]):
  img2.putpixel((lx,ly),
  int(((1-pow(2*lx/float(img2.size[0])-1.0, 4))*
  (1.0-pow(2*ly/float(img2.size[1])-1.0, 4)))*255))
img1.putalpha(img2)
# pngで保存
img1.save("sample651a.png")

# 白背景と合成してjpegで保存
img3 = Image.new("RGB", img1.size, "#ffffff")
img3.paste(img1, mask=img1)
img3.save("sample651b.jpg")

元画像(sf.jpg)

出力画像1(sample651a.png)

出力画像2(sample651b.png)

Monday, November 24, 2008

Python Imaging Libraryで画像をぼかした円で切り取る

PILで画像をぼかした円で切り取るには、以下のコードを実行します。

# coding=UTF-8
import Image
import ImageFilter
import ImageDraw

# 半透明円の切り取りをする
img1 = Image.open("sf.jpg")
img2 = Image.new("RGBA", img1.size, "#000000")
mask = Image.new("L", img1.size, 1)
draw = ImageDraw.Draw(mask)
draw.ellipse((10,10,img1.size[0]-11,img1.size[1]-11), fill="#ffffff")
del draw
mask = mask.filter(ImageFilter.BLUR)
img2.paste(img1, (0,0))
img2.putalpha(mask)
# PNGで保存
img2.save("sample650a.png")
# 白背景と合成してjpegで保存
img3 = Image.new("RGB", img1.size, "#ffffff")
img3.paste(img2, mask=img2)
img3.save("sample650b.jpg")

元画像(sf.jpg)

出力画像1(sample650a.png)

出力画像2(sample650b.jpg)

関連情報
Python Imaging Libraryまとめ

Sunday, November 16, 2008

librsvgを使用して画像の端をぼかす

librsvgを使用して画像の端をぼかすには、以下のsvgファイルを処理します。

blurred-edge.svg


<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="200" height="200">

<defs>
<g id="maskimage"
 x="0" y="0" width="200" height="200">
 <rect x="5" y="5" width="190" height="190" fill="#ffffff"/>
</g>
<filter id="bef" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" >
 <feImage xlink:href="#maskimage" result="maskimage"/>
 <feGaussianBlur in="maskimage" stdDeviation="5" result="blurred"/>
 <feComposite in="SourceGraphic" in2="blurred" operator="in"/>
</filter>
</defs>

<image x="0" y="0" width="200" height="200"
xlink:href="sf.jpg" filter="url(#bef)">
<title>sf.jpg</title>
</image>
</svg>

コマンド
rsvg-convert blurred-edge.svg -f png -o sample694.png

元画像(sf.jpg)

出力画像(sample694.png)

○関連項目
・librsvgをwindowsで使用してSVGからPNG画像を生成する (librsvgをWindowsで使用する方法)
・librsvgを使用して画像の端を暗くする
・libsvgに関する他の記事はこちらを参照してください。

Thursday, November 06, 2008

GMICを使用して画像をぼかす

GMICを使用して画像をぼかすには、以下のバッチファイルのように-blurオプションを使用します。

rem 環境によって変えてね
set gmic=C:\share\gmic-0.8
%gmic%\gmic.exe sf.jpg -blur 1 -o sample613a.png
%gmic%\gmic.exe sf.jpg -blur 5 -o sample613b.png

元画像(sf.jpg)

出力画像(sample613a.png)

出力画像(sample613b.png)

Sunday, October 19, 2008

librsvgで画像をぼかす

librsvgで画像をぼかすには、以下のsvgファイルを処理します。

blurred-image.svg
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink"
  width="300" height="300">
<defs>
<filter id="gbf">
  <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<image x="50" y="50" width="200px" height="200px"
xlink:href="./sf.jpg" style="filter:url(#gbf)">
<title>sf.jpg</title>
</image>
</svg>

コマンド
rsvg-convert blurred-image.svg -f png -o sample683.png

元画像(sf.jpg)

出力画像(sample683.png)

○関連項目
・librsvgをwindowsで使用してSVGからPNG画像を生成する (librsvgをWindowsで使用する方法)
・librsvgでぼかした四角を描画する
・libsvgに関する他の記事はこちらを参照してください。

Saturday, October 18, 2008

librsvgでぼかした四角を描画する

librsvgでぼかした四角を描画するには、以下のsvgファイルを処理します。


<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  width="300" height="300">
<defs>
<filter id="gbf">
  <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>

<rect x="50" y="50" width="200" height="200"
style="fill:#bbddff; filter:url(#gbf)"/>
</svg>

コマンド
rsvg-convert filter-gaussian-blur.svg -f png -o sample682.png

出力画像(sample682.png)

○関連項目
・librsvgをwindowsで使用してSVGからPNG画像を生成する (librsvgをWindowsで使用する方法)
・librsvgで四角を描画する
・libsvgに関する他の記事はこちらを参照してください。

Thursday, October 16, 2008

GMICを使用して画像に放射ブラーをかける

GMICを使用して画像に放射ブラーをかけるには、以下のコマンドを実行します。

rem 環境によって変えてね
set gmic=C:\share\gmic-0.8
%gmic%\gmic.exe sf.jpg -radialblur -o sample592a.png

元画像(sf.jpg)

出力画像(sample592a.png)

Saturday, October 11, 2008

Python Imaging Libraryを使用して画像をぼかす

Python Imaging Libraryを使用して画像をぼかすには、以下のコードを実行します。

# coding=UTF-8
import Image
import ImageFilter

# 画像をぼかす
img1 = Image.open("sf.jpg")
img2 = img1.filter(ImageFilter.BLUR)
img2.save("sample620a.jpg")

元画像(sf.jpg)

出力画像(sample620a.jpg)

関連情報
Python Imaging Libraryまとめ