Image overlay with PNG as a mask using .Net and Javascript

Question

I have a project I'm working on, where a user can upload a PNG image. After loading the frame, they can upload the photo, which will be placed outside the frame. A photograph can be resized and resized so that they can frame their photograph. When they are satisfied with their work, they will be able to save their work.

Canvas is a fixed size on the client. This is an ASP.Net MVC4 application, and we use JavaScript / JQuery. I worked a little with the System.Drawing library and I don’t know how all this will fit together. If this is easy to do using only .Net and JavaScript / JQuery, that would be great, but I don't mind using a third-party .Net library along with JavaScript / JQuery.

UPDATE I use google to go to resize, move and crop the image.

Step 1. The user loads the frame by clicking on some interface and opens a pop-up window with the working area 432px x 348px. The frame is a PNG with a transparent center and an outer edge. This window will be the area for the user to download the image. As you can see in Figure 1, the image is loaded at 100% and passes through the window. The user can choose to move the image and crop or go to step 2.

Step 2: the user will move the image around to find the handles so that they can resize the image. They can select crop at this time without resizing or go to step 3.

Step 3: The user will resize the image and move it into place. Once they run out, they crop the downloaded image.

Step 4: This is the end result after sending the data to the server to be processed.

Answer 1

This can be done in pure .NET. No other libraries should be used.

To add the function of adding images to your application, see the answer here: Upload a photo to MVC 4 applications .

If you make the user upload an image with a frame in png format with transparency support, you just need to draw one image on another, for example, here in the example code (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 (for example, jpg or bmp), however, to support this scenario, you must manually select which pixels to draw on the original image. One easiests solution would be to make one of the colors a transparent key, so when the pixel is in that color, it will not be drawn in the resulting image. You can choose hot pink or another color that is rarely used (or even allows the user to select it). It is still not very complicated, it requires a bit more code to purchase it, some additional work to make it fast, and also search for similar pixels in the case of images with poor image quality.

If you need help with the code, let me know.