HTML2CANVAS image to be sent via email

Question

This is what i am trying to achieve When a button is pressed on a specific div in a HTML page, it goes to the HTML2CANVAS function and creates a canvas img. Now i need to attach this image to the body and open an outlook compose box. 1) How to send mail with image embeded in the body from within a web page? 2) How to convert canvas as a displayable image?

Answer 1

1. This function is the answer to your second question. This function converts a div into a base64 image and on complete render it displays the image to a div or you can do accordingly as you want.

   function getImage(){
   
           html2canvas($("#divID"), {
               onrendered: function(canvas) {
                   //  For image
                   var ctx=canvas.getContext("2d");
   //              ctx.webkitImageSmoothingEnabled = false;
   //              ctx.mozImageSmoothingEnabled = false;
                   ctx.imageSmoothingEnabled = false;
   
                   var convertedImage;
                   $.when(convertedImage = canvas.toDataURL('image/jpg')).promise().done(function(){
   
       $('#finalImg').prop('src', convertedImage)              
                   });  
               }
   
           });                     
   
   }
   

2. And the answer to your first question is also the same this converted image can be sent as a image in mail.

3. But you cannot send a MIME type in mailto body it can only contains plain text as body.. for further reference here is a link Sending mail from HTML page with image in the body