使用.Net和Javascript疊加PNG圖像作爲蒙版

我有一個項目，我正在研究用戶可以在哪裏上傳PNG格式的幀圖像。在他們上傳框架後，他們可以上傳將放置在框架後面的照片。照片可以調整大小並移動，以便他們可以將照片放入框架。一旦他們對自己的工作感到滿意，他們就可以挽救自己的工作。使用.Net和Javascript疊加PNG圖像作爲蒙版

畫布在客戶端上是固定大小。這是一個ASP.Net MVC4應用程序，我們正在使用JavaScript/JQuery。我只對System.Drawing庫做了一點工作，但並不確定這將如何結合在一起。如果只需使用.Net和JavaScript/JQuery就可以輕鬆完成，但我並不反對在JavaScript/JQuery中使用第三方.Net庫。

UPDATE 我走了分享步驟用戶將通過調整大小，移動和裁剪圖像。

步驟1：用戶通過點擊某個用戶界面來加載框架，並打開一個工作區域爲432px x 348px的彈出框。該框架是一個具有透明中心和外邊緣的PNG。在該窗口上將是用戶上傳圖像的區域。如圖1所示，圖像以100％加載並通過窗口。用戶可以選擇周圍和作物移動圖像或轉移到步驟2.

Step 1

第2步：用戶將圍繞移動圖像找到手柄，使他們能夠調整圖像大小。他們可以選擇在這一點上裁剪不調整，以及，或轉移到步驟3.

Step 2

第3步：用戶將調整圖片的大小，並將其移動到位。一旦完成，他們將裁剪上傳的圖像。

Step 3

步驟4：這是一個要被處理的數據被髮送到服務器之後的最終結果。

enter image description here

來源

2012-11-12 DDiVita

它可以在純.NET來實現。沒有其他圖書館必須使用。

爲了添加圖像上傳功能到您的應用程序，請看這裏的答案：Upload Photo To MVC 4 Applications。

如果你讓用戶用框架上傳的圖片中PNG格式與透明度的支持，你應該能夠在一個示例代碼只畫上一個又一個形象，喜歡這裏（GIF格式使用有）：http://www.daniweb.com/web-development/aspnet/threads/112667/how-to-overlay-two-images-in-c 。

也可以支持其他格式（如JPG或BMP），但是框架，以支持此方案，您應該手動選擇哪些像素繪製在原始圖像上。 easiests解決方案之一就是將其中一種顏色設置爲透明度鍵，因此當一個像素使用這種顏色時，它不會被繪製在結果圖像中。您可以選擇鮮豔的粉紅色或其他很少使用的顏色（或者甚至允許用戶選擇它）。它還不是很複雜，購買它需要更多的代碼，一些額外的工作使其快速，並且在質量差的幀圖像的情況下檢測相似的像素。

如果你想要一些幫助的代碼，讓我知道。

來源

2012-11-12 19:11:34

上傳圖片非常簡單，我需要弄清楚的是，如果用戶移動/調整底層圖片的大小，我將需要這些座標和大小，以便在後端可以覆蓋框架和底層圖片。 – DDiVita

如果您可以使用HTML5，那麼您應該能夠使用javascript和HTML5 canvas元素實現縮放和平移功能的用戶界面。如果沒有，你仍然應該能夠用鼠標事件處理ang img元素。我會建議也使用jQuery方便。如果您對代碼有任何問題，請發佈代碼問題部分，我會盡力幫助。 –

這是我到目前爲止：http://jsfiddle.net/ddivita/E9KV8/6/ – DDiVita

使用.Net和Javascript疊加PNG圖像作爲蒙版

回答

相關問題