2

ユーザーが選択した前景色と背景色 (赤、緑、青、シアン、マゼンタ、黄、黒、白に限定) を使用して、その場でグレースケール画像を色付けしようとしています。私が望む効果は次のとおりです。

元のグレースケール http://crawdad.cornell.edu/test/1.png 赤の前景 http://crawdad.cornell.edu/test/2.png 赤の前景、黄色の背景 http://crawdad.cornell.edu/test /3.png

これらは左から右に、元のグレースケール画像、ユーザーが背景色として赤を選択した画像、および赤の背景/黄色の前景の同じ画像を示しています。

ユーザーが色を選択するたびにキャンバスに画像を再描画するのは現実的ではありません (画像は 800x800px になり、アニメーション用に 30 フレームを作成する必要があります)。

私は WebKit、Firefox、および Internet Explorer の最新バージョンのみをターゲットにしているため、html5、css3、および svg 効果は問題ありません。画像はそのままの html<img>タグにすることも<image>、タグ内に含めることもできます<svg>(実際には後者が望ましいです)。

理想的な解決策には、svg フィルターが含まれる場合があります (私は経験がありませんが、これを実行できますか?)。別の可能性は、私のグレースケール画像を、その上に無地の色があり、その下に無地の色があるアルファチャンネルとして扱うかもしれません(その場でどのように行うかわかりません)。

Adobe Director の経験がある人にとって、私が望む効果は、Director の color および bgColor プロパティと同じです。(プロジェクトを Director から html5/javascript に変換しています。)

4

3 に答える 3

4

SVG フィルター効果の素晴らしい世界へようこそ。ここでは何でも可能ですが、それを理解するには永遠に時間がかかります。以下は、赤と青で必要なことを行う方法の例です。ブレンドは、まさにあなたが探しているものではない可能性があり、色に透明度を追加することでメリットが得られる場合があります.

<svg>
  <defs>
    <filter x="0%" y="0%" width="100%" height="100%" id="mk">
      <feImage xlink:href="http://crawdad.cornell.edu/test/1.png" result="img"/>
      <feBlend in="img" in2="SourceGraphic" mode="multiply"> </feBlend>
    </filter>
  </defs>

  <rect width="100" height="100" fill="red" filter="url(#mk)" />
  <rect x="110" width="100" height="100" fill="blue" filter="url(#mk)" />
</svg>

このfeBlend要素には、試すことができるいくつかのモードがあります。また、feCompositeおよびfeColorMatrix要素も興味深いかもしれません。

于 2012-12-26T21:38:26.793 に答える
3

OK、SVG フィルターを使用したソリューションがあります。

<defs>
    <filter id="colorize">
        <feComponentTransfer color-interpolation-filters="sRGB">
            <feFuncR id="fR" type="table" tableValues="0 1"/>
            <feFuncG id="fG" type="table" tableValues="0 1"/>
            <feFuncB id="fB" type="table" tableValues="0 1"/>
        </feComponentTransfer>
    </filter>
</defs>
<image  filter="url(#colorize)" x="0" y="0" width="100" height="100" xlink:href="urlOfGrayscaleImage"/>

次に、JavaScript を使用して を次のように設定しますtableValues(簡単にするために、feFuncR他に与えidたものです)。それぞれの最初の数字tableValuesは画像の黒を置き換える値で、2 番目の数字は白を置き換える値です。したがって、黒/白を赤/黄に変更するtableValuesにはfeFuncR、feFuncG、 およびfeFuncBはそれぞれ「1 1」、「0 1」、および「0 0」です。(0 ～ 255 の RGB 範囲を 0 ～ 1 にマップします。)

設定color-interpolation-filters="sRGB"は重要です。昨日、他の誰かが私に指摘する前に、私はこれを解決しようとして気が狂っていました。

注: 12/27/12 の時点で、Safari は を無視しcolor-interpolation-filters="sRGB"ますが、Chrome と Firefox はそれを使用します。Safari がより新しい WebKit を使用したバージョンをリリースすることを願っています。Chrome で修正されて久しいが、Safari に残っている SVG バグはこれだけではありません。

これが誰かに役立つことを願っています！

于 2012-12-27T19:23:57.623 に答える
0

おそらく、ノードを選択してそのプロパティを変更するだけです。

例では：

document.querySelector('#g2161').setAttribute('style','fill:blue');
于 2012-12-26T17:45:51.837 に答える