I have a canvas which user can interact to make changes to design. Now after the user is done with his changes he can submit his design along with his email ID. But to submit the design i am converting the canvas to an image using /

Now i want to send this image along with user's email ID. How can i send this image directly without letting user save it on his local system.

I have a canvas which user can interact to make changes to design. Now after the user is done with his changes he can submit his design along with his email ID. But to submit the design i am converting the canvas to an image using http://www.nihilogic.dk/labs/canvas2image/

Now i want to send this image along with user's email ID. How can i send this image directly without letting user save it on his local system.

• php
• javascript
• jquery
• html
• canvas

3 Answers 3

I'm thinking you need some javascript magic, and because you already use HTML5 canvas, that shouldn't be a problem.

So, an onclick event on the submit button that will make an ajax request to your backend php mailer script.

var strDataURI = oCanvas.toDataURL();  
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

You just have to pass the strDataURI as a parameter. Now, I think you should also save these in your database, so that the email can just contain this image tag inside:

<img src="http://www.yourdomain./generate_image.php?id=2" alt="Design #2" />

And that the generate_image.php script will do something like this

<?php

header('Cache-control: max-age=2592000');
header('Expires: ' . gmdate('D, d M Y H:i:s \G\M\T', time() + 2592000));

// connect to db here .. 
// $id = (int)$_GET['id']; "SELECT youtable WHERE id = '{$id}'"
// and the $image variable should contain "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

list($settings, $encoded_string) = explode(',', $image);
list($img_type, $encoding_method) = explode(';', substr($settings, 5))

header("Content-type: {$img_type}");

if($encoding_method == 'base64')
    die(base64_decode($encoded_string)); // stop script execution and print out the image

else { // use another decoding method
}

 if(!empty($_POST['email'])){
    $email=$_POST['email'];
    $image=$_POST['legoImage'];
    $headers="From:".$email."\r\n";
    $headers .= "MIME-Version: 1.0\r\n"; 
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
    list($settings, $encoded_string) = explode(',', $image);
    list($img_type, $encoding_method) = explode(';', substr($settings, 5));

    if($encoding_method == 'base64'){
       $file=fopen("images/newLego.png",'w+');
       fwrite($file,base64_decode($encoded_string)) ;
       fclose($file);
    }
    $my_file = "newLego.png";
    $my_path = "images/";
    $my_subject = "My Design";
    $my_message = "Designed by ".$email;
    mail_attachment($my_file, $my_path, "[email protected]", $email, $email, $email, $my_subject, $my_message);        
}

I picked up the mail_attachment() function here.

Assuming you've succeeded in creating an image file of your canvas using the tutorial you posted, you can use a library like PEAR's Mail_Mime to add attachments to your email.

You can refer to this question for an example using Mail_Mime.