8

フォトショップで見られるようなブレンドモード（オーバーレイ、スクリーン、ライトニングなど）を使用して、Webページ上で2つ以上の画像をブレンドすることは可能かどうか疑問に思っています。

この種のことはフラッシュとJavaで可能であることを私は知っていますが、プラグインなしで、つまりCSSやJavaScriptでそれは可能ですか？比較的小さな画像で機能するこの効果のJavaScriptの例をいくつか見てきましたが、高解像度の画像でこれを実行することに興味があります...これは純粋に実験目的です。

4

2 に答える 2

6

キャンバス要素を使用すると、オーバーレイを取得して非常に簡単に明るくすることができます。各ビットマップをキャンバスにレンダリングする前に指定する設定がすべてです。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

于 2010-09-09T23:23:19.417 に答える
5

あるHTMLCanvasコンテキストから別のコンテキストにPhotoshopスタイルのブレンドモードを実行するための、別個の軽量のオープンソースライブラリを作成しました：context-blender。使用例は次のとおりです。

// Might be an 'offscreen' canvas
var over  = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

現在のバージョンでサポートされているブレンドモードなどの詳細については、 READMEを参照してください。

于 2010-12-03T22:52:18.973 に答える