我有一个项目，我的工作，用户可以上传PNG格式的帧图像。之后，他们上传的框架，他们可以上传照片，将被放置在框架后面。照片可以调整大小和感动，使他们能够适应他们的照片到框架。一旦他们很高兴与他们的工作，他们可以保存他们的工作。

I have a project I am working on where the user can upload a frame image in PNG format. After they upload the frame they can upload a photo that will be placed behind the frame. The photo can be resized and moved so they can fit their photo into the frame. Once they are happy with their work, they can save their work.

画布是在客户端上一个固定的大小。这是一个ASP.Net MVC4应用程序，我们使用的JavaScript / JQuery的。我只工作了一点与System.Drawing中图书馆，不知道如何将一切组合在一起，但。如果这可以很容易地在仅使用的.Net和JavaScript / JQuery的，这将是伟大的工作要做，但我不反对使用第三方。NET库旁​​边的JavaScript / JQuery的。

The canvas is a fixed size on the client. This is an ASP.Net MVC4 application and we are using JavaScript / JQuery. I have only worked a little with the System.Drawing library and not sure how this will all fit together, yet. If this can be done easily in using just .Net and JavaScript / JQuery that would be great, but I am not opposed to using a 3rd party .Net library alongside JavaScript / JQuery.

更新 我goign共享步骤，用户将通过调整大小，移动和裁剪图像。

UPDATE I am goign share the step the user will go through to Resize, Move, and crop the image.

步骤1：用户点击一些UI加载框架和它打开与432px x 348px工作区弹出。的帧是一个透明的中心和外边缘一个PNG。在该窗口将是一个区域，上传图片的用户。正如你可以看到图1中，图像加载100％，去过去的窗口。用户可以选择将图像移动和作物或移动到第2步

Step 1: The user loads the frame by clicking on some UI and it opens a popup with a working area of 432px x 348px. The frame is a PNG with a transparent center and outer edge. On that window will be an area for the user to upload an image. As you can see in figure 1, the image is loaded at 100% and goes past the window. The user can choose to move the image around and crop or move onto step 2.

第2步：用户将移动图像周围找手柄，使他们能够调整图像大小。他们可以选择到裁剪，在这一点上没有调整，以及，或者移动到第3步。

Step 2: The user will move the image around to find the handles so they can resize the image. They can chose to crop at this point without resizing, as well, or move onto step 3.

第三步：用户将调整图片的大小并移动到位。一旦他们完成，他们将裁剪上传的图片。

Step 3: The user will resize the image and move it into place. Once they are finished they will crop the uploaded image.

步骤4：这是后的数据被发送到要处理的服务器的最终结果

Step 4: This is the final result after the data is sent to the server to be processed.

推荐答案

它可以在纯.NET完成。没有其他的库必须被使用。

It can be done in pure .NET. No other libraries have to be used.

在以图片上传功能添加到您的应用程序，看看答案在这里：的上传照片到MVC 4应用程序。

In order to add image uploading feature to Your application, take a look at the answer here: Upload Photo To MVC 4 Applications.

如果你让用户上传的图片，在一帧的 PNG 的透明度支持的格式，你应该能够只是画一个图像上的另一个，就像在一个样本code在这里（一GIF时有）的http://www.daniweb.com/web-development/aspnet/threads/112667/how-to-overlay-two-images-in-c.

If You make user upload the image with a frame in png format with transparency support, You should be able to just draw one image on another, like in a sample code here (a gif is used there): http://www.daniweb.com/web-development/aspnet/threads/112667/how-to-overlay-two-images-in-c.

您还可以支持其他格式的帧（如 JPG 或 BMP 的），但是，为了支持这种情况下，你应该手动选择哪些像素借鉴原始图像。之一的easiests方案将是使颜色透明键之一，因此，当一个像素处于这种颜色，它不会在所得的图像绘制。你可以选择明亮的粉红色或很少使用（甚至可以让用户选择它），另一种颜色。它仍然不是很复杂，买它需要多一点点code，一些额外的工作，使其快速和treshold检测相似像素的情况下，质量差的帧的图像。

You can also support frames in other formats (like jpg or bmp), however, in order to support this scenario, You should manually choose which pixels to draw on the original image. One of the easiests solutions would be to make one of the colors a transparency key, so when a pixel is in this color, it won't be drawn in the resulting image. You can choose bright pink or another color that is rarely used (or even allow a user to choose it). It's still not very complex, buy it requires a little bit more code, some additional work to make it fast and a treshold to detect similar pixels in case of bad quality frame images.

如果你想要一些帮助与code，让我知道。

If You want some help with the code, let me know.