通过电子邮件在HTML5画布上创建的图像

Question

我有一个画布,用户可以进行交互以对设计进行更改.现在,在用户完成更改后,他可以提交他的设计以及他的电子邮件ID.但是提交设计我正在使用http://www.nihilogic.dk/labs/canvas2image/将画布转换为图像

现在我想将此图像与用户的电子邮件ID一起发送.如何直接发送此图像而不让用户将其保存在本地系统上.

Answer 1

我认为你需要一些javascript魔法,并且因为你已经使用HTML5画布,这应该不是问题.

因此,提交按钮上的onclick事件将向您的后端php邮件程序脚本发出ajax请求.

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

您只需将strDataURI作为参数传递即可.现在,我认为您还应该将这些保存在您的数据库中,以便电子邮件可以在其中包含此图像标记:

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

而且generate_image.php脚本会做这样的事情

<?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
}