title: To attach an image to an email on a html button click
body: <p>I have created a html button in my webpage, which can take screenshot of the screen and save it as an image. For that I used the following code.</p>
  
  <pre><code>&lt;button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px;  padding:2px 4px 1px 4px" onclick="genScreenshot()"&gt;&lt;span class="glyphicon glyphicon-envelope"&gt;&lt;/span&gt;&lt;/button&gt;
  
  &lt;a id="test"&gt;&lt;/a&gt;
  &lt;div id="box1"&gt;&lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;                                                                                                             
              function genScreenshot() {
  html2canvas(document.body, {
    onrendered: function(canvas) {
    $('#box1').html("");
    if (navigator.userAgent.indexOf("MSIE ") &gt; 0 || 
                                                                              navigator.userAgent.match(/Trident.*rv\:11\./)) 
                                              {
              var blob = canvas.msToBlob();
      window.navigator.msSaveBlob(blob,'Test file.png');
    }
    else {
      $('#test').attr('href', canvas.toDataURL("image/png"));
      $('#test').attr('download','screenshot.png');
      $('#test')[0].click();
    }
    }
  });
  }  
  &lt;/script&gt;
  </code></pre>
  
  <p>Now, I want to attach this image to an <code>outlook</code> new mail after it gets downloaded (i.e., in one click it should download the screenshot and also attach it to the mail).
  Is there a way to do it?
  And if so, Please explain me clearly. I dont understand hard concepts. So, please explain it in <em>layman terms</em>.</p>