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

我的瘋子想讓我爲他開發麪包蛋糕麪包店的網站。我應該爲用戶提供一份表格，以便他們可以訂購蛋糕並將照片提交到蛋糕上打印。現在，我需要製作一個動態影像系統，以顯示圖片用戶提交時蛋糕外觀的預覽..如果你可以建議一些圖書館這樣做，這將是非常有幫助的。如何使用Javascript或Jquery在HTML中處理圖像？

來源

2012-07-08 Biswas Lamichhane

有非常，非常小，你可以與圖像前端做。一定量的剪切粘貼和一些過濾。你到底在想什麼？ – Malvolio 2012-07-08 06:48:37

根據瀏覽器支持要求，可以使用HTML5功能。 – 2012-07-08 07:14:04

你可以使用絕對定位和三維變換的CSS，帶溢出隱藏背景無和邊框圓角半徑圓和圖像作爲子元素圓餅。

這就是它。

來源

2012-07-08 07:06:47 Tschallacka

也許提供一個瀏覽器支持的例子和警告。我們還需要處理來自文件輸入的圖像的客戶端顯示。 – 2012-07-08 07:10:41

對於一般性問題，您將得到一個通用答案。如果你用你的代碼發佈一個小提琴，我會很樂意分叉它並提供示例。 – Tschallacka 2012-07-08 07:13:28

這聽起來像你試圖做兩件事情：

顯示在客戶端用戶選擇的照片（它關係到服務器之前）。
轉換圖像，使其出現在蛋糕上的正確位置。

這兩個函數傳統上屬於後端處理領域，但歸功於HTML5和CSS3草案標準，它們至少可用於Chrome和Firefox。下面的解決方案並不普遍，你將有回落到了不支持的瀏覽器基於服務器的解決方案，但它是值得一提：

顯示用戶選擇的圖像

當用戶從<input type=file>中選擇一個文件，它將調度一個change事件。發生這種情況時，DOM對象有一個名爲files的FileList屬性，允許您讀取這些文件的內容。 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/

來源

2012-07-08 14:41:35

謝謝Brian。我正在考慮一些JavaScript庫，但我完全忘了我們可以使用Css3和html5 canvas元素來操縱圖像。 – 2012-09-07 10:13:23

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

回答

相關問題