いくつかのTシャツに面付け（または2枚の写真を合成）する方法

Question

ユーザーがイメージを別のイメージに重ねることができるようにするために、編集者を作る必要がありますか？

例：白のTシャツがあり、花のイメージがあり、花のイメージをドラッグしてTシャツにドロップすると、Tシャツは以前の画像、そして結果は花の写真付きTシャツですが、私はそれをもっと速くするために何を使うことができますか？私はそれが欲しい画像をドラッグするためにJavascript（ドラッグアンドドロップ）他の画像、言い換えれば、私は2枚の画像を組み合わせたいが、それは最初の画像の上にdropedときに、第2のGETはトリミング、私はあなたが私は

が

Answer 1

あなたはこの単純な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には、画像を切り抜くことができるユーティリティがあると思います。