發送電子郵件在HTML5畫布上創建的圖像

我有一個畫布，用戶可以通過它進行交互以對設計進行更改。在用戶完成他的更改後，他可以提交他的設計和他的電子郵件ID。但要提交設計我將畫布轉換爲圖像使用http://www.nihilogic.dk/labs/canvas2image/發送電子郵件在HTML5畫布上創建的圖像

現在我想發送此圖像以及用戶的電子郵件ID。我如何直接發送這個圖像而不讓用戶將它保存在他的本地系統上。

來源

2011-05-27 Rohan210

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);   
}

我拿起mail_ attachment（）函數here。

來源

2011-07-25 13:10:49 Rohan210

假設您已經使用您發佈的教程成功創建了畫布的圖像文件，則可以使用PEAR的Mail_Mime這樣的庫將附件添加到您的電子郵件中。

對於使用Mail_Mime的示例，可以參考this問題。

來源

2011-05-27 10:26:08 Wytse

問題是;如何將圖像傳送到服務器。據我所知，它仍然在客戶端。 – 2011-05-27 10:35:00

@berry是的..我的問題在於將圖像發送到服務器而不讓用戶處理它。 – Rohan210 2011-05-27 10:38:48

我想你需要一些javascript魔術，而且因爲你已經使用了HTML5 canvas，所以這不應該是個問題。

因此，提交按鈕上的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 
}

來源

2011-05-27 10:42:38 Highstrike

@highstrike ...不幸的是，圖像是在客戶端創建的，我想將其發送到服務器端。它不在我的服務器 – Rohan210 2011-05-27 10:45:00

是的，我知道，這就是爲什麼你必須在提交按鈕上做出這個Ajax請求，以便你從客戶端傳遞「data：image/png; base64，iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt ...」到你的服務器。使用jQuery for ajax或其他庫 – Highstrike 2011-05-27 10:49:10

好吧，我會看看那是怎麼回事！ – Rohan210 2011-05-27 10:51:21

發送電子郵件在HTML5畫布上創建的圖像

回答

相關問題