how do i add image created using HTML2Canvas to eml file to contain data and image in attachment or body

Question

  onInitiateExitProcess() {
    if (this.ToEmail) {
      const modalContent = document.querySelector('.email') as HTMLElement;

      html2canvas(modalContent).then(canvas => {
        const imageData = canvas.toDataURL();
        this.sendEmail(imageData);
      });
    }
    //call function making post request to change exitProcessInitiated of this.userId to true

    this.initiateExitProcess.emit();
    this.updateExitProcessInitiation();
}  

sendEmail(imageData: string) {
    const subject = 'Exit Process Information';
    const body = 'Please find the attached information about your assigned items.';

    const base64Image = imageData.split(',')[1];

    const img = new Image();
    img.src = imageData;
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // Resize the canvas to desired dimensions
      const maxWidth = 600; // Maximum width for the resized image
      const maxHeight = 500; // Maximum height for the resized image
      let width = img.width;
      let height = img.height;

      if (width > maxWidth) {
        height *= maxWidth / width;
        width = maxWidth;
      }

      if (height > maxHeight) {
        width *= maxHeight / height;
        height = maxHeight;
      }

      canvas.width = width;
      canvas.height = height;

      ctx?.drawImage(img, 0, 0, width, height);

      const resizedImageData = canvas.toDataURL('image/png');

      const byteCharacters = atob(resizedImageData.split(',')[1]);
      const byteNumbers = new Array(byteCharacters.length);
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      const byteArray = new Uint8Array(byteNumbers);
      const blob = new Blob([byteArray], { type: 'image/png' });

      let emailContent = `Bcc: ${this.ToEmail}\n`;
    emailContent += `Subject: ${subject}\n`;
    emailContent += `X-Unsent: 1\n`;
    emailContent += "Content-Type: multipart/mixed; boundary=--boundary_text_string" + "\n";
    emailContent += "\n";
    emailContent += "----boundary_text_string" + "\n";
    emailContent += "Content-Type: text/html; charset=UTF-8" + "\n";
    emailContent += "\n";
    emailContent += body + "\n";
    emailContent += "----boundary_text_string" + "\n";
    emailContent += "Content-Type: image/jpeg; name=assigned_items.jpeg";
    emailContent += "Content-Transfer-Encoding: base64" + "\n";
    emailContent += "Content-Disposition: attachment" + "\n";
    emailContent += "" + "\n";
    emailContent += base64Image + "\n"; // Attach the base64 encoded image data
    emailContent += "----boundary_text_string--";
    const blobData = new Blob([emailContent], { type: 'text/plain' });

  
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blobData);
    link.download = 'email_draft.eml';
    link.click();
      
    };
  }

In the function onInitiateExitProcess is used to create image of the div selected as html element then using html2canvas image is created then passed to sendEmail().

Then in sendEmail we give rest subject, body and make the image fix the dimensions adding all the data to eml file.

currently with what I'm trying is to get eml file containing image as either in body or attachment. What i am getting is "it looks like we don't support this format" along with no options to send email when eml file is opened.

Answer 1

You're missing a newline after Content-type:

emailContent += "Content-Type: image/jpeg; name=assigned_items.jpeg" + "\n"; // add newline here

and adding resized image base64 should work as well:

emailContent += resizedImageData.split(',')[1] + "\n"; // Attach the base64 encoded image data