问题
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.
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.
UPDATE I am goign share the step the user will go through to Resize, Move, and crop the image.
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.
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.
Step 4: This is the final result after the data is sent to the server to be processed.
回答1:
It can be done in pure .NET. No other libraries have to be used.
In order to add image uploading feature to Your application, take a look at the answer here: Upload Photo To MVC 4 Applications.
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.
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.
If You want some help with the code, let me know.
来源：https://stackoverflow.com/questions/13349507/overlay-image-with-png-as-mask-using-net-and-javascript