如何去中進行旋轉圖像的自定義選項

Question

我有一個鞋的8張png圖片;每45度一個。我希望能夠自定義此鞋有不同的顏色，並讓用戶能夠旋轉鞋360度顯示任何自定義顏色各地鞋企選擇的用戶。我的問題是，這是否意味着我需要爲每種不同顏色，不同角度的不同圖像？這看起來像一個荒謬的數量的圖像，特別是如果更多的自定義選項添加到顏色以外。我不知道是否有什麼在那裏，這將有助於簡化這一目標，以避免加載和交換基礎上選擇的角度和自定義選項萬張圖片，而且我非常想知道，如何更有經驗的人可能會去這件事。

感謝您的建議。

Answer 1

我不能完全確定你使用的是什麼顏色的鞋子，但以下是你可以做的。如果您有一隻顏色爲#999的鞋和一隻#7B5，您可以簡單地拍攝8張不同顏色的圖片，使背景不透明，然後刪除所有屬於特定顏色的部分並使其變爲透明，然後改變圖像的background-colour樣式。

This demo使用原始圖像http://www.selectism.com/files/2013/05/wtaps-canvas-sneakers-02.jpg（imgur link in case that one 404s），使用色度鍵（綠屏）的影響，以任何專門的照片編輯器可用（Photoshop中，GIMP）從它去掉了顏色#39476A。由於背景是不透明的，放置一個彩色背後將填補只是顏色的圖像上，導致你想要的效果。

當您獲得色度鍵控圖像時，只需在<img>標記上放置一個background-color樣式，具體取決於用戶選擇的顏色，它將顯示爲選中狀態。