如何把圖像對其它圖像

我有以下腳本如何把圖像對其它圖像

<div class="left"> 
<img src="image1.jpg" height="186" width="160" /> 
</div> 

<div class="center"> 
<img src="image2.jpg" height="186" width="160" /> 
</div> 

<div class="right"> 
<img src="image3.jpg" height="186" width="160" /> 
</div>

產生如下： Figure-2

我有這個簡單的表格，上傳圖片：

<form action="upload/image" method="post"> 
<input type="file" name="upload_image" /> 
<input type="submit" /> 
</form>

上傳圖片的原因是看圖片上面的馬克杯是怎麼樣的。

現在將圖像上載後的杯子看起來像下面 Figure-2(After uploading image)

圖2

現在，如果你善待仔細看看上面的圖片，你會看到上傳的圖片被貼用杯子的方式，就好像它是用Photoshop設計的，但事實上並非如此。

現在我的問題是，請你告訴我如何將上傳的圖像粘貼到咖啡杯的所有三個圖像上，並使它們看起來像圖-2。

感謝提前:)

PS 我的想法從這個定點>http://www.zazzle.com/cr/design/pt-mug

我試圖達到的網站有同樣的事情（我一直在努力了這麼久，但尚未沒有結果...沒有把上傳的圖像放在馬克杯的圖像上）。

這裏的下載鏈接圖像我這裏使用http://i43.tinypic.com/d66h4.png

來源

2012-02-18 black_belt

它工作正常...（也[相同的代碼]（http://stackoverflow.com/questions/9276190/how-to-let-users-put-text-on-an-image）wth） – Purag 2012-02-18 05:39:31

是你提供你的網站的鏈接，還是隻是你試圖複製的一個例子 – 2012-02-18 05:41:39

嗯，這是不可能的，因爲這個Skype圖像的CSS！您必須在Gimp或PS中創建一個帶有透明度的人造效果，並將上傳的圖像絕對定位並通過px調整px。 – elclanrs 2012-02-18 05:43:32

是的，你可以做到這一點。

如果從Zazzle.com檢查給定的URL，上傳圖像後，它會調用其服務器上的程序 - 「designall.dll」。它正在做所有的魔術。正如我們的其他朋友提到的那樣，不可能僅僅通過HTML，CSS和JavaScript（不使用Canvas）來實現這種效果。

但使用一些服務器端程序，你可以實現這個沒有任何問題。

當我在LAMP上編程時，我給出了一個解決方案來實現PHP和ImageMagick。

用戶上傳圖片。
圖像將被髮送到後端PHP文件。
PHP會按照我們的要求來扭曲圖像。
創建三個副本並將其存儲在具有某個唯一ID的臨時文件夾中。
作爲迴應，我們會得到一些成功的代碼。
一旦我們獲得成功代碼，我們將加載臨時文件夾中的圖像。
當用戶點擊任何類型的圖片時，我們會根據需要更新圖片。

而關於實際的失真代碼，您可以使用ImageMagick插件。

約ImageMagick的插件的更多信息可以在以下中找到： ImageMagick Website

更多關於方式的信息來扭曲（實際包裝）使用ImageMagick的圖像，可以發現：Wrapping和Distrotion。這些鏈接也包含很多預覽示例。

對於我們的例子，我們需要創建一些靜態代碼，每次都會以相同的形狀扭曲圖像。

請讓我知道如果我失去了一些東西。

朋友們，請幫助「black_belt」，如果有更好的解決方案。

謝謝。

來源

2012-02-18 07:31:43

「這是不可能的「我很不同意，Javascript和canvas可以非常強大 – AlanFoster 2012-02-18 07:43:50

是的，我同意AlanFoster。不使用HTML，CSS和JavaScript就不能實現這種效果，而不使用HTML，CSS和JavaScript。畫布，對不起，我感到困惑。 – 2012-02-18 07:45:41

如何把圖像對其它圖像

回答

相關問題