キャンバス上にグレースケール画像の色を再現する方法

グレースケールアイコン（透明な背景を持つpng画像）をキャンバス上に描画するときに素早く色付けする方法はありますか？私はグレースケールのアイコンをグレースケールに変えることを意味します（与えられた色のテーマに一致するグレーの代わりに特定の色の陰影）キャンバス上にグレースケール画像の色を再現する方法

私は手動で各ピクセルを操作できますが、もっと自動化された方法がありますか？

出典

2016-08-26 Lapsio

あなたは何を意味しますか？洪水は色で塗りつぶしますか？人の顔の白黒写真を金髪の髪/青い目の素敵なカラーバージョンに変えてみましょうか？ –

申し訳ございませんが、不明な点は – Lapsio

グレースケール画像を "greenscale"に再調色するために合成を使用します。

コンポジットを使用するのはピクセル操作よりも高速ですが、ボーナスとして、ドメイン間のセキュリティ制限（getImageDataを代わりに使用する場合）を実行しないでください。

完全に緑色の画像を作成します。
キャンバスにグレースケール画像を描画します。
globalCompositeOperation='color'を設定すると、既存のグレースケールピクセルが、上に描画されたピクセルで再着色（「再表示」）されます。
キャンバスに完全に緑色のイメージを描画します。

"カラー"合成によってグレースケールが緑色に変わります。

+ = を

注：ブレンディング機能（エッジないIE）で最新のブラウザが必要

例コードとデモ：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/koolBW.png"; 
 
function start(){ 
 

 
    // create a fully green version of img 
 
    var c=document.createElement('canvas'); 
 
    var cctx=c.getContext('2d'); 
 
    c.width=img.width; 
 
    c.height=img.height; 
 
    cctx.drawImage(img,0,0); 
 
    cctx.globalCompositeOperation='source-atop'; 
 
    cctx.fillStyle='green'; 
 
    cctx.fillRect(0,0,img.width,img.height); 
 
    cctx.globalCompositeOperation='source-over'; 
 

 
    // draw the grayscale image onto the canvas 
 
    ctx.drawImage(img,0,0); 
 

 
    // set compositing to color (changes hue with new overwriting colors) 
 
    ctx.globalCompositeOperation='color'; 
 

 
    // draw the fully green img on top of the grayscale image 
 
    // ---- the img is now greenscale ---- 
 
    ctx.drawImage(c,0,0); 
 
    
 
    // Always clean up -- change compositing back to default 
 
    ctx.globalCompositeOperation='source-over'; 
 
}

body{ background-color:white; } 
 
#canvas{border:1px solid red; }

<canvas id="canvas" width=256 height=256></canvas>

出典

2016-08-26 23:48:34 markE

これはCSSクラスを使用して実現できます。以下の例のP.Sを確認します。ソース：W3Schoolsの

img { 
 
    width: 33%; 
 
    height: auto; 
 
    float: left; 
 
    max-width: 235px; 
 
} 
 
.blur { 
 
    -webkit-filter: blur(4px); 
 
    filter: blur(4px); 
 
} 
 
.brightness { 
 
    -webkit-filter: brightness(250%); 
 
    filter: brightness(250%); 
 
} 
 
.contrast { 
 
    -webkit-filter: contrast(180%); 
 
    filter: contrast(180%); 
 
} 
 
.grayscale { 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
} 
 
.huerotate { 
 
    -webkit-filter: hue-rotate(180deg); 
 
    filter: hue-rotate(180deg); 
 
} 
 
.invert { 
 
    -webkit-filter: invert(100%); 
 
    filter: invert(100%); 
 
} 
 
.opacity { 
 
    -webkit-filter: opacity(50%); 
 
    filter: opacity(50%); 
 
} 
 
.saturate { 
 
    -webkit-filter: saturate(7); 
 
    filter: saturate(7); 
 
} 
 
.sepia { 
 
    -webkit-filter: sepia(100%); 
 
    filter: sepia(100%); 
 
} 
 
.shadow { 
 
    -webkit-filter: drop-shadow(8px 8px 10px green); 
 
    filter: drop-shadow(8px 8px 10px green); 
 
}

<body> 
 

 
    <p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p> 
 

 
    <img src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300"> 
 
    <img class="blur" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300"> 
 
    <img class="brightness" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300"> 
 
    <img class="contrast" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300"> 
 
    <img class="grayscale" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300"> 
 
    <img class="huerotate" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300"> 
 
    <img class="invert" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300"> 
 
    <img class="opacity" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300"> 
 
    <img class="saturate" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300"> 
 
    <img class="sepia" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300"> 
 
    <img class="shadow" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300"> 
 

 
</body>

はスタイルが何ができるか、フィルタ学習のためのこのリンクを参照してください。

ClickMe

出典

2016-08-26 21:41:18

です。キャンバスからPNGにエクスポートしてディスクに保存する必要がありますので、CSSはここにはないと思います – Lapsio

ねえ、この選択肢を試してみてください！

最初にキャンバス要素を作成し、キャンバスコンテキストを使用してイメージを描画します。キャンバスフィルタを使用してエフェクトを適用できます。 toDataURLメソッドを使用してイメージのpngを取得します。すべての詳細な手順は以下のウェブサイトで説明されています。

http://www.html5canvastutorials.com/advanced/html5-canvas-grayscale-image-colors-tutorial/

最後にそれを保存/エクスポートする.toDataURL（）メソッドを使用します。

あなたのためにうまくいきますように！

出典

2016-08-26 22:13:50

これらのフィルタについては、https：//developer.mozilla .org/ja-ja/docs/Web/API/CanvasRenderingContext2D/filterは、残念ながらFirefoxでのみ利用可能です。クロム（nw.js）に限られています。私は、ピクセルを繰り返し処理する必要があると思う：<またはブレンドモードでいくつかのハッキングを試してみてください... – Lapsio

うん！私は誰かがより良い解決策を得るまで、それが私たちに残されている唯一の方法だと思います。がんばろう！ –

キャンバス上にグレースケール画像の色を再現する方法

答えて

関連する問題