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

ありがとうございます!

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

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

George46963837

Thank you again for all the knowledge you distribute,Good post. I was very interested in the article, it's quite inspiring I should admit. I like visiting you site since I always come across interesting articles like this one.Great Job, I greatly appreciate that.Do Keep sharing! Regards,
Vertz Marketing

George46963837

This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value. Im glad to have found this post as its such an interesting one! I am always on the lookout for quality posts and articles so i suppose im lucky to have found this! I hope you will be adding more in the future...
news

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