Email an image created on HTML5 canvas

Question

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.

score 7 · Answer 1 · answered May 27 '11 at 10:42

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.com/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
}

@highstrike ... Unfortunately the image is created on client-side, I want to deliver it to server side. It is not on my server — Rohan210, May 27 '11 at 10:45
yeah i know, that's why you have to make that ajax request on the submit button, so that you pass "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..." from the client side to your server. Use jQuery for ajax, or another library — Highstrike, May 27 '11 at 10:49
Sorry for late reply.. This helped me generate the image on server but i'm still having some problems with forwarding the new image on to destination!! After i complete i'll post the complete code. — Rohan210, Jun 01 '11 at 14:05

score 1 · Accepted Answer · edited Aug 01 '11 at 19:59

 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, "myemail@gmail.com", $email, $email, $email, $my_subject, $my_message);        
}

I picked up the mail_attachment() function here.

score 0 · Answer 3 · edited May 23 '17 at 12:25

0

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.

edited May 23 '17 at 12:25

Community

1
1

answered May 27 '11 at 10:26

Wytse

500
2
10

The question is; how to get the image to the server. It remains on client side, as far as I can tell. – Berry Langerak May 27 '11 at 10:35
@berry Yes.. My problem lies in sending that image to server without letting the user handling it. – Rohan210 May 27 '11 at 10:38

Email an image created on HTML5 canvas

3 Answers3

Linked