Discussions

Qcanvasに複数の画像を重ねて描写・補正

複数の画像をglobalCompositeOperationで重ねて、
重ねた各画像の透明度・ガンマ値・色空間などを調整できたらと考えています。

画像を加算で重ねるところまではできたのですが、そこに補正をつける方法がわかりません。
CamanJSのようにフェーダーをつけられたらと思っているのですが…
http://camanjs.com/

よろしくお願いします。

Sample Code

AAnswer to: canvasに複数の画像を重ねて描写・補正

ethertank

前面の画像の globalCompositeOperation (lighter / source-over のみ) と opacity を変更して背面の画像と合成するサンプルを作成してみました。canvas や input[type=range] を使用しているので HTML5 対応ブラウザのみでの動作となります。

合成前に背面の画像も加工したい場合は form 要素を追加するのが良いのではないかと思います。

ネイティブのメソッドのみで可能な画像処理しか行っていません。
より複雑な処理が必要な場合は getImageData() メソッドで ピクセル情報を取得し、自作関数で加工して描きだすなどする必要があります。その際に、lighter や source-over 以外の合成方法を用いて前面画像を 1px づつ合成しようとすると想定外の描画になると考えられます。処理用に canvas を二つ追加しそこで一旦処理を行い、最後に一括で drawImage() メソッドを用いるのが良いと思います。

http://www.html5.jp/canvas/ref.html

あまり良いサンプルでは無いと思いますが、拙作へのリンクもおいておきます。
http://jsdo.it/ethertank/ot1B

imageData は [赤, 青, 緑, 透明度 ....] という形の配列になっているので、赤のみ強くする、部分的に透明度を下げる、青成分を捨てるなどの操作が簡単に行えます。彩度変更や色相回転はちょっと計算が必要になると思いますが、可能です。rgbaToHsla() / hslaToRgba() などの関数を作成してそれを使うのが直感的で良いでしょうね。出来たら是非私に教えてください(笑)

usedesi

ありがとうございます!

勉強不足で、ソースを見てもわからないところが多数ですが、
作りたい物を目指してがんばってみます。

参考にさせていただきます。

Post a question

You can post JavaScript, HTML, CSS related questions with attached reference to actual codes and get the answers likewise.

Ask a question

  • 1. Click the ‘Post a question’ above

  • 2. Enter question details, reference code, and click ‘Add question’ button

  • 3. Question will be paired with the code on display

Add an answer

  • 1. Choose a question

  • 2. Enter answer details, attach the reference code and click ‘add answer’ button

  • 3. Your answer will accompanied with attached code

Tag