パターンでイメージを塗りつぶす方法

私はイメージを持っているとしましょう！ enter image description here パターンでイメージを塗りつぶす方法

今私は enter image description here

でそのイメージを埋めるためにしたいと私の最終的なイメージがそれを行う方法

次のようになりますか？これまでのところ、私はそのイメージの色を変えることができましたが、パターンを埋めることはできませんでした。

私はhtml5キャンバス（パターン）でできますか？ PHPや任意のWebプラットフォームでそれを行う方法はありますか？

2013-07-27 MD TAHMID HOSSAIN

あなたはこれを簡単に行うことはできませんが、それをしたい場合は、画像操作用のライブラリについては言えません 2番目の画像を少し透明にして、最初の画像カーブも同様に表示されますが、少し不透明です。 phpにはmagik、gdを使うことができますが、キャンバスにも同じことが当てはまりますが、方向については、 –

というファイルパターンに関するドキュメントを参照する必要があります。 –

[PNGaとCSS]（http://imgur.com/86fZO1i）を使用してください。 –

あなたのシャツにマッピングされたパターンを適用するシミュレートを作成するには、次の手順を実行します

はあなたのシャツの高コントラストバージョンを作成します。（シャツのイメージが不透明である任意の新しい描画のみ表示されます）キャンバス
設定globalCompositeOperationの上にシャツは、「ソースの上には」
する
のdrawImage
があなたの市松模様の画像からパターンを作成します
市松模様
でキャンバス
は非常に低い値にglobalAlphaを設定します（それが唯一の非透明のシャツに表示されます）を記入
繰り返しのdrawImage高コントラストシャツ
（これは効果的にシャツ「しわ」重畳）より良い解決策

について

enter image description here

は、「バンプマップ」を作成しますそのシャツをチェックして3つのパターンで塗りつぶしてください。

ここはコードとフィドルです：http://jsfiddle.net/m1erickson/kzfKD/

<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />  <script src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var img1=new Image(); var img=new Image(); img.onload=function(){ img1.onload=function(){ start(); } img1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/4jiSz1.png"; } img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png"; function start(){ ctx.drawImage(img1,0,0); ctx.globalCompositeOperation="source-atop"; ctx.globalAlpha=.85; var pattern = ctx.createPattern(img, 'repeat'); ctx.rect(0, 0, canvas.width, canvas.height); ctx.fillStyle = pattern; ctx.fill(); ctx.globalAlpha=.15; ctx.drawImage(img1,0,0); ctx.drawImage(img1,0,0); } }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=436 height=567></canvas> </body> </html>

出典

2013-07-27 07:31:11 markE

のコードを与えることができます！私は人生を救った！ありがとうございました。 –

ところで、あなたはどのようにして "bump-map"を作成したのですか？ jquery、html5でそれをやってもいいですか、それともPhotoshopに戻る必要がありますか？ –

はい、Photoshopでテクスチャマップ（バンプマップ）を作成します。 – markE

あなたの質問にコメントで示唆したように、1つのアプローチは、DOM要素をオーバーレイすることである - トップDOM要素は、透明性とPNGであるべきであり、下の一つは、あなたの背景パターンでなければなりません。これも機能します（結合した画像を計算する必要がないので高速ですが）画像の結合方法は柔軟性がありません。キャンバスメソッドでは、任意のブレンドモードを使用できます。

ほとんどのブラウザではまだサポートされていない2番目のオプションは、CSS background blend modesです。これにより、透明でPNG画像を作成し、背景色を割り当て、CSSでブレンドを使用することができます。これは高速で、1つのDOM要素しか必要としません。

第3のアプローチは、キャンバスを使用することです。 （）編集： markEのキャンバスアプローチは、より迅速かつ簡単です。）私はこのJSFiddleで1キャンバスベースのアプローチを実装：http://jsfiddle.net/IceCreamYou/uzzLa/ - ここでの要点は次のとおりです。

// Get the base image data 
var image_data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); 
var image_data_array = image_data.data; 

// Get the pattern image data 
var overlay_data = ovlyCtx.getImageData(0, 0, ovlyCtx.canvas.width, ovlyCtx.canvas.height).data; 

// Loop over the pixels in the base image and merge the colors 
for (var i = 0, j = image_data_array.length; i < j; i+=4) { 
    // Only merge when the base image pixel is nontransparent 
    // Alternatively you could implement a border-checking algorithm depending on your needs 
    if (image_data_array[i+3] > 0) { 
     image_data_array[i+0] = combine(image_data_array[i+0], overlay_data[i+0]); // r 
     image_data_array[i+1] = combine(image_data_array[i+1], overlay_data[i+1]); // g 
     image_data_array[i+2] = combine(image_data_array[i+2], overlay_data[i+2]); // b 
    } 
} 

// Write the image data back to the canvas 
ctx.putImageData(image_data, 0, 0);

何それがないことの使用、その後、ベースイメージとあなたのパターン画像をタイル秒キャンバス1つのキャンバスを作成していますベースピクセルが不透明である場合、ベース上にパターンをオーバーレイするピクセルデータ。

出典

2013-07-27 07:33:54 IceCreamYou

パターンでイメージを塗りつぶす方法

答えて

関連する問題