如何使用Javascript或Jquery處理HTML中的圖像？

Question

我的朋友要我為他開發一個面餅店的網站。 我應該為用戶提供一個表格，以便他們可以訂購蛋糕並提交要打印在蛋糕上的照片。現在，我需要制作一個動態成像系統，以預覽用戶提交的圖像與蛋糕外觀的預覽..如果您可以建議一些圖書館這樣做會非常有幫助。

Answer 1

聽起來您正在嘗試做兩件事：

1. 在客戶端上顯示用戶選擇的照片（在發送到服務器之前）。
2. 變換該圖像，使其在蛋糕上的正確位置顯示。

傳統上，這兩個功能都屬於后端處理領域，但是由於HTML5和CSS3草案標准，它們至少在Chrome和Firefox中可用。 以下解決方案不是通用的，您將不得不退回到針對不支持瀏覽器的基於服務器的解決方案，但是值得一提：

顯示用戶選擇的圖像

用戶從<input type=file>選擇文件時，將調度change事件。 當這種情況發生時，DOM對象有一個FileList屬性調用files讓你閱讀這些文件的內容。 URL.createObjectURL可讓您將文件轉換為可用於圖像源的URL：

input.addEventListener('change', function () {
    preview.src = URL.createObjectURL(this.files[0]);
});

preview.addEventListener('load', function () {
    URL.revokeObjectURL(this.src);
});

有關演示，請參見http://jsfiddle.net/bnickel/yP7Bb/ 。

變身蛋糕頂

CSS3 3d轉換使轉換曲面以使其看起來3D成為可能。 我進行了實驗，發現以下內容很有說服力。 0.7垂直壓縮它，而-0.008是旋轉以添加透視圖。

-webkit-transform: matrix3d(1,     0,     0,     0,
                            0,     0.7,   0,    -0.008,
                            0,     0,     1,     0,
                            0,     0,     0,     1);

        transform: matrix3d(1,     0,     0,     0,
                            0,     0.7,   0,    -0.008,
                            0,     0,     1,     0,
                            0,     0,     0,     1);

        transform: matrix3d(1,     0,     0,     0,
                            0,     0.7,   0,    -0.008,
                            0,     0,     1,     0,
                            0,     0,     0,     1);

您可以在此處使用值： http : //jsfiddle.net/bnickel/v9Jat/

Answer 2

您可以使用絕對定位和3d變換css，帶有過流的邊框半徑圓，而沒有背景，而圖像則作為帶有圓蛋糕的子元素。

就是這樣。