title: Overlay image with PNG as mask using .Net and Javascript
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>UPDATE
  I am goign share the step the user will go through to Resize, Move, and crop the image.</p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/FJQmP.jpg" alt="Step 1"></p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/ceETw.jpg" alt="Step 2"></p>
  
  <p>Step 3: The user will resize the image and move it into place. Once they are finished they will crop the uploaded image.</p>
  
  <p><img src="https://i.stack.imgur.com/zrfuI.jpg" alt="Step 3"></p>
  
  <p>Step 4: This is the final result after the data is sent to the server to be processed.</p>
  
  <p><img src="https://i.stack.imgur.com/LH5Zd.jpg" alt="enter image description here"></p>