2014-07-15 74 views
1

我試圖發送一個電子郵件與圖像附件。我可以發送電子郵件,但我沒有顯示圖片,它只是黑色的成功。 php正在接收一個base64字符串,它是一個圖像。另外我想這樣做,而不需要在服務器上存儲任何東西或寫任何東西。有沒有可能的方法來做到這一點?
這就是php的樣子。附加base64時獲取黑色圖片img

<?php 
    $base64 = $_POST['dataURL']; 
    //define the receiver of the email 
    $to = '[email protected]'; 
    //define the subject of the email 
    $subject = 'Test email with attachment'; 
    //create a boundary string. It must be unique 
    //so we use the MD5 algorithm to generate a random hash 
    $random_hash = md5(date('r', time())); 
    //define the headers we want passed. Note that they are separated with \r\n 
    $headers = "From:Francisco Granado\r\nReply-To: [email protected]"; 
    //add boundary string and mime type specification 
    $headers .= "\r\nContent-Type: multipart/mixed; boundary=\"PHP-mixed-".$random_hash."\""; 
    //read the atachment file contents into a string, 
    //encode it with MIME base64, 
    //and split it into smaller chunks 
    $attachment = base64_decode($base64); 
    //define the body of the message. 
    ob_start(); //Turn on output buffering 
    ?> 
    --PHP-mixed-<?php echo $random_hash; ?> 
    Content-Type: multipart/alternative; boundary="PHP-alt-<?php echo $random_hash; ?>" 

    --PHP-alt-<?php echo $random_hash; ?> 
    Content-Type: text/plain; charset="iso-8859-1" 
    Content-Transfer-Encoding: 7bit 

    This email have attached a image file 
    For SED_WE analysis purposes. 

    --PHP-alt-<?php echo $random_hash; ?> 
    Content-Type: text/html; charset="iso-8859-1" 
    Content-Transfer-Encoding: 7bit 

    <h1>SED_WE</h1> 
    <p>This email have attached a image file </p> 
    <p>For SED_WE analysis purposes.</p> 

    --PHP-alt-<?php echo $random_hash; ?>-- 

    --PHP-mixed-<?php echo $random_hash; ?> 
    Content-Type: image/jpeg; name="attachment.jpeg" 
    Content-Transfer-Encoding: base64 
    Content-Disposition: attachment 

    <?php echo $attachment; ?> 
    --PHP-mixed-<?php echo $random_hash; ?>-- 

    <?php 
    //copy current buffer contents into $message variable and delete current output buffer 
    $message = ob_get_clean(); 
    //send the email 
    $mail_sent = @mail($to, $subject, $message, $headers); 
    //if the message is sent successfully print "Mail sent". Otherwise print "Mail failed" 
    echo $mail_sent ? "Mail sent" : "Mail failed"; 
    ?> 

而且,這裏是我的JS:

$(document).ready(function (e) { 
    var imgBase64; 
    function imgToBase64(url, callback, outputFormat) { 
     var canvas = document.createElement('CANVAS'); //Creates variable containing canvas in the DOM 
     var canvas_context = canvas.getContext('2d'); //Creates canvas environment (context) in 2 dimensions 
     var img = new Image; // new Image instance 
     img.crossOrigin = 'Anonymous'; //Cross origin textures from other URL's are permitted (see http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html) for more information 
     console.log('ON LOAD IMG'); 
     //Image load trigger, encode image into base64 
     img.onload = function() { 
      //Determine canvas height and width 
      canvas.height = img.height; 
      canvas.width = img.width; 
      console.log('Canvas info:\n Height: ' + canvas.height + '\n Width: ' + canvas.width); 
      //Draws the image raw format 
      canvas_context.drawImage(img, 0, 0); 
      var dataURL = canvas.toDataURL(outputFormat || 'image/png'); //THIS IS WHERE THE MAGIC HAPPENS (img encode to base64) 
      //imgBase64 = dataURL; 
      $('#show-picture').attr('src', dataURL); //Change source of the #show-picture image tag to the base64 string to show preview to user 
      console.log(dataURL); 
      callback.call(this, dataURL); //Callback function @param {dataURL} 
      // Clean up 
      canvas = null; 
     }; 
     img.src = url; 
    } 

    //Reads the path to the picture for a preview 
    function readURL(input) { 
     if (input.files && input.files[0]) { //if file exist 
      var reader = new FileReader(); //new instance of the file reader 

      reader.onload = function (e) { //when the reader loads the chosen file... 
       imgToBase64(e.target.result, function (dataURL) { //..then the is converted 
        setDataURL(dataURL); 
       }); 
      } 
      reader.readAsDataURL(input.files[0]); 
     } 
    } 

    function setDataURL(dataURL){ 
     imgBase64 = dataURL; 
     console.log('setDataUrl=>'+imgBase64); 
    } 



    $('#take-picture').change(function() { 
     readURL(this); 
     console.log('ONLOAD'+imgBase64); 
    }); 

    $('#uploadImgBtn').on('click',function(){ 
     var base64String= imgBase64.replace(/data:image[^;]+;base64,/,''); 
     console.log('base64string'+base64String); 
     $.post('php/mailer.php',base64String,function(data){alert('Success!'); console.log('response: '+data)}); 
    }); 

}); 

PS:我已經從其他崗位嘗試不同的東西,但沒有成功,或者他們寫在服務器上,也這是我第一次在PHP所以任何好的建議都非常受歡迎。

回答

1

在發送數據到php的JavaScript文件中,沒有鍵名dataURL,我需要從字符串中刪除data:image/*;base64,以發送純粹的base64。因此,它的假設是這樣的:

$('#uploadImgBtn').on('click',function(){ 
     var base64String= imgBase64.replace(/data:image[^;]+;base64,/,''); 
     console.log('base64string'+base64String); 
     $.post('php/mailer.php',{dataURL:base64String},function(data){ 
      alert('Success!'); 
      console.log('response: '+data)}); 
    }); 

然後php會收到dataURL和所有我需要做的是chunk_split是的base64字符串。像這樣:

$base64 = $_POST['dataURL']; 
    ... 
    $attachment = chunk_split($base64); 

    ...