title: Save div on the server as image and download it
body: <p>In my Asp.NET MVC application, in a div I have superpositioned images in to show how it seem an insole model.</p>
  
  <p>I should download this image when the model is ready. </p>
  
  <p>What I did works on my pc and download the image.</p>
  
  <p>But when I publish the application, it opens the image instead of downloading it.</p>
  
  <p>Any idea please ?</p>
  
  <p>Here is what I did :</p>
  
  <pre><code>  Controller : 
  
  
  
      public JsonResult SaveModelImage(string dynamicImage)
      {
          try
          {
              var buffer = Convert.FromBase64String(dynamicImage.Replace("data:image/png;base64,", ""));
              //For capron modesls, there is more than one model with the same reference. For every model, must save image to the related folder.
              var imageName = Guid.NewGuid().ToString().Substring(0, 10);
  
              var imagePath = Path.Combine(Server.MapPath("/MyApplicationRoot/Images/Temp/" + imageName + ".jpg"));
  
              using (MemoryStream ms = new MemoryStream(buffer))
              {
                  using (var bmp = Bitmap.FromStream(ms, true))
                  {
                      bmp.Save(imagePath);
                  }
              }
              return Json(System.Configuration.ConfigurationManager.AppSettings["RootLink"] + "/Images/Temp/" + imageName + ".jpg");
          }
          catch (Exception ex)
          {
              UserMethods.ParseError(ex, "UploadModelImage");
              return Json(ex.Message);
          }
      }
  
  
  
  
     HTMLCS :
  
         &lt;a onclick="downloadImage()" class="download-image"&gt;&lt;/a&gt;
  
         function downloadImage() {
          html2canvas(document.getElementById("reviewTopLeft1"), {
          onrendered: function (canvas) {
              var tempcanvas = document.createElement('canvas');
              tempcanvas.width = 640;
              tempcanvas.height = 480;
              var context = tempcanvas.getContext('2d');
              context.drawImage(canvas, 0, 0, 640, 480);
  
  
              var val = tempcanvas.toDataURL();
  
  
              $.ajax({
                  url: '@Url.Action("SaveModelImage", "Admin")',
                  type: 'post',
                  data: { dynamicImage: val},
                  dataType: 'json',
                  success: function (iudata) {
                      downloadURI(iudata, "Model.jpg");
                  },
                  error: function (err) {
                      hideLoader();
                  }
              });
          }
      });
     }
  
  
      function downloadURI(uri, name) {
  
      var link = document.createElement("a");
      link.download = name;
      link.href = uri;
      link.target = "_blank";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      delete link;
  
     }
  </code></pre>