web-dev-qa-db-ja.com

HTML5でフォトショップのようなブレンドモードは可能ですか？

赤い長方形を入れたい<div>要素をウェブページ上に配置すると、透明に見えるだけでなく、Photoshopの乗算モードでブレンドしたように見えます。

<div>はposition: fixedなので、その下のコンテンツはすぐに変更されます。

HTML5/CSS3/canvas/SVGトリックでそれは可能ですか？

csshtmlcanvassvgblending
35
Ernests Karlsons

あるHTMLキャンバスコンテキストから別のHTMLキャンバスコンテキストに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 [〜＃〜] を参照してください。

これを使用して、キャンバス間で乗算を実行できますが、標準のHTML要素では実行できません。

27
Phrogz

いいえ（ネイティブではありませんが）近日提供予定： http://blogs.Adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/

12
Lea Verou

次のデモもご覧ください。 http://media.chikuyonok.ru/canvas-blending/ canvasでこれを行う方法を確認します。

ブレンドモードの式のソースとそれらの適用方法を確認してください（式はpixasticやcontext-blenderよりもはるかに読みやすくなっています）。

7
Georgii Ivankin

これはHTML5ではありませんが、あなたが求めていることを私が見つけることができる限り近くなっています。

Javascriptブレンディングモード （OpenGL）。

Photoshopのような "ブレンドモード"は、言語が別の方向に急変しない限り、純粋なHTMLでエミュレートできるとは思いません。しかし、これを行うためのいくつかの簡単な方法を見ることは素晴らしいでしょう。

2
Kyle

それにも興味があります。私がビジュアルデザイナーのためにコーディングした多くのレイアウトは、それを使用できたでしょう。このスレッドの他の投稿とは別に、これを行う方法があります。現在のところ、Firefox 4でのみ、OpenGlやCanvasを使用せずに実行できます。それは、SVGフィルターの使用を通してです。明らかに、それはWebkitとChrome=からの寝間着ですが、まだ機能しているものはありませんでした。

ここにいくつかのデモと説明があります：

ブレンドモードに近い何か私見何かは、現在達成するのがあまりにも難しいです。 feConvolveMatrix、feSpecularLighting、またはfeColorMatrixに関する参照を見つけるのは非常に困難であり、例を理解するのは不可能です。彼らは働くことができましたが、私は方法がわかりません。

EffectGamesのようなものを希望します ：

div.Sprite {
   position: absolute;
   z-index: 2;
   composite: add;
}

これはより良い方法です。たぶん、数学に熟練した忍者が私たちにそれをするための自由を与えてくれるかもしれません。

EDIT：ブレンドモードを正確に実行するためのより簡単なSVG仕様があります。しかし、私がテストしたどのブラウザーもこれで機能しません（FF4、IE9、Opera11、Webkit Nightly）： http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html -しかし、これがHTML-DOM要素で使用できるかどうかもわかりません。

2
Irae Carvalho

単純なCSS（Canvasなし）ですでに使用できます。例：

mix-blend-mode: 'multiply'

Internet Explorerではサポートされていない可能性がありますが、他のブラウザではサポートされています。

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

1
Antonio Brandao

これは私が見た中で最も近いものです 、そしてはい、すべてのアセットはキャンバス内にある必要があります。 Internet Explorerは、まだリリースされていないバージョン9でキャンバスのサポートを開始するため、IE <9をサポートする必要がある場合は、回避策を使用する必要があることに注意してください。

1
Luis

Chrome Canaryに配置されているため、まもなくリリースされる予定です。 http://blogs.Adobe.com/webplatform/2013/04/23/all-blend-modes-for- css-fragment-shaders-have-landed /

1
Ric

http://canvasquery.com/ でキャンバスを使用してgimp/photoshopから知られている最も人気のあるブレンドモードを実装しましたが、リラタイムには適していません。

これは、キャンバスにネイティブブレンドモードが導入されると変化します

https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable

0
rezoner

含まれている画像と後の正確な効果に応じて、画像とCSSグラデーションのクリエイティブなレイヤーを作成して、目的の効果を実現できる場合があります。

http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/

0
Jonathon Hill