Email HTML Canvas

Question

I'm attempting to send the result of two merged html canvases via email.

My attempt was to do this by setting the value of an input field in a form with the base64 value of the converted canvas, I would then pass this to a php emailer script where in the message section I would set the source of a html image as the base64 value (as would work in normal html pages). This doesn't seem to work however.

My full function for merging the two canvases, converting to an image, downloading the image and then attempting to set the value of is as below

function convertImage() 
    {
        var bottleCanvas = document.getElementById('bottleCanvas');
        var designCanvas = document.getElementById('editorCanvas');
        var bottleContext = bottleCanvas.getContext('2d');

        if($('.colourCanvas500').is(':visible')) 
        {
            bottleContext.drawImage(designCanvas, 153, 250);
        }
        else if($('.colourCanvas600').is(':visible')) 
        {
            bottleContext.drawImage(designCanvas, 155, 238);
        }
        else if($('.whiteCanvas500').is(':visible')) 
        { 
            bottleContext.drawImage(designCanvas, 132, 235);
        }
        else if($('.whiteCanvas600').is(':visible'))  
        {
        bottleContext.drawImage(designCanvas, 132, 235);
        }

        var data = bottleCanvas.toDataURL("image/png");
        var link = document.createElement('a');
        link.download = "bottle-design.png";
        var dataLink = bottleCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        document.write(dataLink);
        link.href = dataLink;
        link.click();

        $('#imageInput').val(dataLink);
        $('form[name="bottleDetails"]').submit();
  }

How would I go about sending my canvas converted image via email?

HTML code for form is as below:

<form action="php/submit.php" method="post" name="bottleDetails" class="customise-bottle">    

        <ul class="options">

            <li id="header">
                <div class="container">
                    <h1>Customise your Bottle</h1><br/>
                </div>
            </li>     

            <li id="name">
                <div class="container">
                    <label>Name:</label>
                    <div class="contact-field">
                        <input class="contact-info" name="name" type="text" placeholder="Mr Water" />
                    </div>
                </div>
            </li>

            <li id="email">
                <div class="container">
                    <label>Email:</label>
                    <div class="contact-field">
                        <input class="contact-info" name="email" type="email" placeholder="[email protected]" />
                    </div>
                </div>
            </li>

            <li id="company">
                <div class="container">
                    <label>Company:</label>
                    <div class="contact-field">
                        <input class="contact-info" name="company" type="text" placeholder="GiveMeTap" />
                    </div>
                </div>
            </li>

            <li id="bottle-size-section">
                <div class="container">
                    <label>Bottle Size:</label>
                    <ul id="size-buttons">
                        <li><button type="button" id="500ml" class="bottle-size selected">500ml</button></li>
                        <li><button type="button" id="600ml" class="bottle-size">600ml</button></li>
                        <input type="hidden" id="sizeInput" name="size" value="500ml" />
                </div>
            </li>

            <li id="bottle-colour-section">
                <div class="container">
                    <label>Bottle Colour:</label>
                    <div id="colours">
                        <button type="button" class="colour selected" id="blue"></button>
                        <button type="button" class="colour" id="pink"></button>
                        <button type="button" class="colour" id="silver"></button>
                        <button type="button" class="colour" id="black"></button>
                        <input type="hidden" id="colourInput" name="colour" value="blue" />
                    </div>
                </div>
            </li>

            <li id="bottle-lid-type">
                <div class="container">
                    <label>Lid Type:</label>
                    <ul id="size-buttons">
                        <li><button type="button" id="pull" class="bottle-size selected">Pull Up</button></li>
                        <li><button type="button" id="flip" class="bottle-size">Flip Up</button></li>
                        <input type="hidden" id="lidInput" name="lid" value="twist" />
                </div>
            </li>

            <li id="bottle-quantity-section">
                <div class="container">
                <label>Quantity:</label>
                <div id="quantity-dropdown">
                    <select name="quantity" id="quantity">
                        <option value="25-100">25-100</option>
                        <option value="100-250" selected>100-250</option>
                        <option value="250-500">250-500</option>
                        <option value="500+">500+</option>
                    </select>
                </div>
            </li>
            <input type="hidden" id="imageInput" name="image" value="testing" />
            <li id="purchase">
                <div class="container">
                    <ul id="final-buttons">
                    </ul>
                </div>
            </li>

        </ul>

    </form>
    <button type="submit" onclick="convertImage()" download="bottle-design.png" type="button" class="btn" id="save-design">Email</button>

PHP code is as below:

<?php

 if(!empty($_POST['email'])){

    $name = $_POST['name'];
    $email = $_POST['email'];
    $company = $_POST['company']; 
    $size = $_POST['size']; 
    $colour = $_POST['colour'];
    $lid = $_POST['lid']; 
    $quantity = $_POST['quantity'];
    $image = $_POST['image'];

    $subject = "Bottle Design Quote";
    $message = "Customer Name: $name<br/> Customer Email: $email<br/> Company Name: $company<br/> Bottle Size: $size<br/> Bottle Color: $colour<br/> Bottle Lid: $lid<br/> Quantity: $quantity<br/> Design: $image";
    $to = "[email protected]";
    $headers = "From: \"$name\"<$email>\n";
    $headers .= "Reply-To: $email\n";
    $headers .= "Content-Type: text/html; charset=\"utf-8\"";
    mail($to,$subject,$message,$headers);

    header('Location: success.php'); 

   }
   else 
   {
       header('Location: builder.php');
   }
?>

Answer 1

There's more to a data URL than sticking the base64 value in the src, but that's academic because data URLs are very poorly supported in email clients anyway, so it's not worth doing. PHPMailer's msgHTML function will convert data URLs into normal embedded attachments, so I suggest you make use of that, or if you want a bit more control you can decode the value (to avoid double-encoding) and attach it yourself using addStringAttachment or addStringEmbeddedImage.

Answer 2

I got this working through a combination of javascript and PHP, in the following process: combine two canvases together, convert to base64, convert to image for downloading to user's computer, pass base64 to PHP script, email as attachment.

My Javascript (+jQuery) for doing this is as follows:

function convertImage() {
    var bottleCanvas = document.getElementById('bottleCanvas');
    var designCanvas = document.getElementById('editorCanvas');
    var bottleContext = bottleCanvas.getContext('2d');

    if($('.colourCanvas500').is(':visible')) {
        bottleContext.drawImage(designCanvas, 153, 250);
    }
    else if($('.colourCanvas600').is(':visible')) {
        bottleContext.drawImage(designCanvas, 155, 238);
    }
    else if($('.whiteCanvas500').is(':visible')) { 
        bottleContext.drawImage(designCanvas, 132, 235);
    }
    else if($('.whiteCanvas600').is(':visible')) {
        bottleContext.drawImage(designCanvas, 132, 235);
    }

    var data = bottleCanvas.toDataURL("image/png");
    var link = document.createElement('a');
    link.download = "bottle-design.png";
    var dataLink = bottleCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    //document.write(dataLink);
    link.href = dataLink;
    link.click();

    $('#imageInput').val(data);

    $('form[name="bottleDetails"]').submit();
}

And the PHP code:

 <?php
 session_start();

 if(!empty($_POST['email'])){

    //Here the session variables are converted back into standard variables.
    $name = $_POST['name'];
    $email = $_POST['email'];
    $company = $_POST['company']; 
    $size = $_POST['size']; 
    $colour = $_POST['colour'];
    $lid = $_POST['lid']; 
    $quantity = $_POST['quantity'];

    $image = $_POST['image'];
    $_SESSION['finalImage'] = $image;

    $img = str_replace('data:image/png;base64,', '', $image);

    $subject = "Bottle Design Quote";
    $message = "Customer Name: $name<br/> Customer Email: $email<br/> Company Name: $company<br/> Bottle Size: $size<br/> Bottle Color: $colour<br/> Bottle Lid: $lid<br/> Quantity: $quantity<br/> Design: $image";
    $to = "[email protected],[email protected],[email protected],[email protected]";
    $headers = "From: \"$name\"<$email>\n";
    $headers .= "Reply-To: $email\n";
    $headers .= 'Content-Type: multipart/related; boundary="boundary-bottle"; type="text/html"';
    $headers .= "MIME-Version: 1.0\r\n";

        $body = "

--boundary-bottle
Content-Type: text/html; charset='US-ASCII'

Customer Name: $name<br/> Customer Email: $email<br/> Company Name: $company<br/> Bottle Size: $size<br/> Bottle Color: $colour<br/> Bottle Lid: $lid<br/> Quantity: $quantity<br/> Design:

<IMG SRC='cid:bottle-design' ALT='Bottle Design'>

--boundary-bottle
Content-Location: CID:somethingatelse ; this header is disregarded
Content-ID: <bottle-design>
Content-Type: IMAGE/PNG
Content-Transfer-Encoding: BASE64

$img

--boundary-bottle--";

    mail($to,$subject,$body,$headers);

    header('Location: ../success.php'); 

   }
   else 
   {
       header('Location: ../builder.php'); //We direct the user to the error page if a session does not exist - or if they have refreshed the page.
   }
?>