0

画像の最終出力は次のようになります。

ここに画像の説明を入力してください

htmlパーツを見ると、以下のように異なるdivを使用して作成されています。すべてのdivは、CSSを使用して1対1で配置され、絶対位置になります。

<div id="tproduct" class="timage" style="z-index: 30; background-image: url('main-mask.png') ;"></div>
<div id="tdesign1" class="timage" style="z-index: 20; background-image: url('design1.png');"></div>
<div id="tdesign2" class="timage" style="z-index: 20; background-image: url('design2.png');"></div>
<div id="tmaincolor" class="timage" style="background-color:blue;"></div>
<div id="tembellishment" class="timage" style="z-index: 10; background-image: url('flower.png');"></div>

別々に見ると、以下のようになります。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

ここに画像の説明を入力してください

等

私の質問は、上記のdivと画像のセットを使用して単一の画像を作成するにはどうすればよいですか？PHPまたはjQueryを使用できますか？

私はそれがどのように行われるべきかについてのステップまたはガイダンスだけが欲しいです。ありがとう

4

2 に答える 2

2

PHPでは、次のようにします。

  1. 最終的な画像（すべてを1つに結合する）を宣言します

    $ final = imageCreateTrueColor（$ final_width、$ final_height）;

  2. 観察者から「遠い」ところから始めて、アルファブレンディング$finalを使用してすべての画像を結合し始めます。imageCopy

  3. 最後に、単一の最終出力を単一の画像として取得します。

    imageJPEG（$ final、$ outputFileName、$ quality）;

「手順またはガイダンス」のみを要求しましたが、次の点にも注意する必要があります。

  • 基本画像はスプライトである可能性があります。その場合、あなたはあなたが興味を持っている領域を各画像から「切り取る」必要があるでしょう。ImageCopyあなたのためにもそれをすることができます。
  • 画像は適切なサイズではない可能性があり、を使用する必要がありますImageCopyResampled。
  • CSSの透明度を正確に複製するために必要な操作は、GD関数を使用して使用できない場合があり、imageMagickPHP拡張機能を調べる必要があります。
  • 背景画像（「花」）は繰り返しパターンである可能性があります。そのサイズがメインマスクのサイズよりも小さい場合は、すべての最終的な画像を背景テクスチャで覆うために、水平方向と垂直方向を循環させる必要があります。
于 2012-11-13T16:57:11.443 に答える
1

PHPでGDを使用して、必要に応じて画像を操作できます。あなたの写真から、私はあなたが複数のレイヤーを持っていると思います、各レイヤーはあなたの「服」で乗算されるべきです（シェーディングを正しくするために）そしてあなたはそれらを重ねて適用して最終的なjpgを作成します。

を使用して画像をロードしimagecreatefrompng、imagecreate最終的なjpgを作成し、一連の（私が推測する）imagecopyレイヤーを次々にロードする必要があります。

于 2012-11-13T16:41:34.687 に答える