2013/05/24

簡易的にぼかしと調整だけで画像の線の太さを修正する方法

CELSYS社のイラスト制作ソフトのプラグインコンテストが開催され、その大賞を受賞されたプラグインに、ラスター画像（ベクター画像ではないもの）の線幅を太くするプラグインというのがありました。
アルゴリズムが気になっていたのですが、ある日別件で調べていたところ、簡易的にですが似たような効果を発見したので書き留めておきます（ただし課題あり）。

主に使用するフィルタ

  • ぼかし処理
  • コントラスト調整 or レベル補正
ぼかし処理で線をふくらませ、コントラストなどを補正してぼけてる部分を濃くするわけです。

具体的な操作

とりあえずCLIP STUDIO PAINTを想定しておきますが、Photoshop やそのほかの画像編集ソフトでも可能ですね。
前提として、操作する線画レイヤーが透明度を持つ場合（線画の線以外が透明な場合）を想定しています。 背景色が白色などの場合は、以下の(6)で白いレイヤーを作る作業をとばしてください。
まずは、「線画」レイヤーに画像をおいておきます：
処理前の画像
  1. 線画レイヤーを複製
    image
  2. 複製したレイヤーを「ガウスぼかし」でぼかす。
    基本的にこのぼかす範囲によって太さが変わります。image
  3. ぼかしたレイヤーを「比較（暗）」or「乗算」モードにする
    image 
  4. 「線画 のコピー」を更に複製し、ぼかされた部分を濃くする
    image
  5. 上の(4)で複製したレイヤーと、「線画 のコピー」と「線画」の、計三つのレイヤーを結合する。
    image
  6. [メニュー]→[レイヤー]→[新規レイヤー]→[べた塗り]で白を指定し、白いレイヤーを作成する
  7. 新しくレイヤーフォルダをつくり、一番目に「線画」レイヤー、二番目に白いレイヤーをおく
    image 
  8. [メニュー]→[レイヤー]→[新規色調補正レイヤー]→[明るさ・コントラスト]や[レベル補正]や[トーンカーブ]を、「線画」レイヤーの上に作成し、線をはっきりさせる（下記の画像はトーンカーブのみで調整）
     image
  9. 鮮やかな色になりすぎたときは、彩度を調整するなどする

処理結果（コントラストの補正で調整したバージョン）：

image
さらに太くしたり、細くしたりもこれでできると思います。

課題

といっても、このやり方には課題があります。
  • 線の交点が太くなりがち、交点の周りが若干ぼける
      image
  • 調整しないと、色が濃くなる、薄い線が消える場合がある
元の線画のサイズから縮小して使用するのみなら、気にならない…かも？
というわけで簡易版ということでよろしくです。

あとがき

自作プラグインのカケアミの自動生成アルゴリズムの方も、そのうち書きたいな…と思います。
同人誌やイラストの美しいデザイン100―レイアウトの基本から配色、文字組みまで
時刻: 7:10

2013/02/16

ローカルに保存した画像ファイル等がInternetExplorerで表示できない原因

ネット上で困っている人がいた。症状をまとめると、下記のようなもの。

  1. FireFoxで「名前をつけてページを保存」→「Webページ、完全」として、Web上のページをローカルに落とした。
  2. そのファイルを IE で見ると、画像が表示されない、外部のJavaScriptファイルなどが読み込まれないなど、ちゃんとみられなかった。

真っ当な対処法としては以下のようなものだけど、保存しようとしているページが信頼できないページなときは、不正なファイルが読み込まれる可能性があるのでやらないほうがいい。

対処法

  1. 保存時には、日本語のファイル名で保存しない。たとえば abc.html などの名前で保存する。
  2. ファイルを右クリックしてプロパティを開き、セキュリティの「ブロックを解除」をクリックし、「適用」をクリックしてプロパティを閉じる。

危険な対処法

さらに、とても危険な方法は、FireFox の アドレスバーに about:config と入力して Enter を押して、browser.download.manager.scanWhenDone の値を true から false にする。デメリットが無視できないと思うので、やる人はあんまりいないかな。

原因

Windows ではダウンロードしてきたファイルと普通のファイルをセキュリティのため区別していて、それを IE で表示させようとすると表示できなくなる。FireFox や Chrome はこの情報を使用しないらしく、表示できる。

原因かな？と思ったが違ったもの

保存したページに JavaScript の文法ミスがあったり、文字エンコーディングが明確じゃなかったり、改行コードが一ファイル内に複数の種類あったりしたけど、それは違った。

時刻: 9:00

2013/01/22

さくらのVPSで Apache と node.js を共存させる

追記：

この方法だとWebSocketが使用できないよと教えていただきました。以下のサイト様では、WebSocketも使用できるようにしているようです。コメントをくれた通りすがりさん、ありがとうございました。

ApacheとNode.jsを共存させてWebSocketも通す [俺の備忘録]

node.js の入門をした。

それで、Apache をポート80で起動させつつ、node.js へもポート80でアクセスしたい。

http://xx.xx.xx.xx/nodejs/ にアクセスされたら、node.jsを動かしているhttp://localhost:1234/を表示させたい。

そこで Apache のリバースプロキシとよばれるものを使ってみた。

Apache に設定を追加

httpd.conf の最後に追加する。

<Location "/nodejs">
    ProxyPass http://localhost:1234
    ProxyPassReverse http://localhost:1234
</Location>

末尾のスラッシュに注意

ちなみに、うっかり"/nodejs/"にすると、http://xx.xx.xx.xx/nodejs でアクセスしたときにリバースプロクシが起動しない。

また、<Location "/nodejs">と書いておきながら、 ProxyPass または ProxyPassReverse でhttp://localhost:1234/と、末尾にスラッシュをつけて設定してしまうと、ProxyPassReverseによる再割り当てのときなどに意図と違う結果がでてしまう。

ProxyPass

これでリバースプロキシを設定する

ProxyPassReverse

これは、Apache がHTTPレスポンスヘッダのリダイレクト系（Location, Content-Location, URIヘッダ）をうまく再割り当てしてくれるものらしい。

たとえば http://xx.xx.xx.xx/nodejs で以下のような Location ヘッダによるリダイレクトをすると、

HTTP/1.1 302 Found
Location: http://localhost:1234/hogehoge/special.html

これを Apache が再割り当てしてくれる。

HTTP/1.1 302 Found
Location: http://xx.xx.xx.xx/nodejs/hogehoge.special.html

参考

node.js の超初心者コード

node.js 用のソースは入門用によくあるこういうもの。

test.js:

var http = require('http');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('aloha\n');

}).listen(1234);

console.log('Server http://localhost:1234/ running...');

確認

サーバーを起動する。

$node test.js

ブラウザで http://xx.xx.xx.xx/nodejs を確認すると、alohaと表示された。

時刻: 9:27
登録: 投稿 (Atom)