0

ユーザーがある画像を別の画像に重ねることができるリダクターを作成する必要がありますか?

たとえば、白い T シャツがあり、別の花の画像があり、花の画像をドラッグして T シャツにドロップすると、T シャツには前の画像の花が描かれています。その結果、花の写真が入った T シャツができあがります。それをより速く行うにはどうすればよいでしょうか?他の画像に入れたい画像をドラッグするには Javascript (ドラッグ アンド ドロップ) が必要になると思います。つまり、2 つの画像を結合したいのですが、最初の画像にドロップすると 2 番目の画像が切り取られます。私の言いたいことを理解していただければ幸いです。

4

1 に答える 1

0

次の単純な HTML を使用できます。

<div style="background-color: white;position:absolute;">
  <img id="flowers" style="position:absolute;" src="empty.png"> // Empty image
  <img style="position:absolute;" src="mask1.png"> // A transparent T-shirt pattern surrounded with non-transparent background color (in this case white)
  <img style="position:absolute;" src="mask2.png"> // 20-50% transparent pattern for shadows in T-shirt
</div>

マスキング画像は、画像作成時にレイヤーを使用して合成することもできます。ここでのコツは、画像内の T シャツのパターンのみを透明にし、T シャツを「生きた」ものにする影は部分的にのみ透明にすることです。

ドラッグ アンド ドロップが終了したら、次の操作を行います。

document.getElementById('flowers').src='your_path_to_flowers.png';

これはかなり昔ながらの方法ですが、古いブラウザでも機能します。HTML5/CSS3 には、画像を別の画像でトリミングできるユーティリティがあると思います。

于 2012-04-19T10:54:05.713 に答える