div與html2canvas的屏幕截圖。發送到PHP，保存：損壞圖像

我產生畫布並把它傳遞到PHP這樣：div與html2canvas的屏幕截圖。發送到PHP，保存：損壞圖像

$('body').on('click','#save_image',function(){ 
       html2canvas($('.myImage'), { 
        onrendered: function(canvas) { 
         //$('.imageHolder').html(canvas); 
          var dataURL = canvas.toDataURL("image/png"); 

          // $('.imageHolder').append('<img src="'+dataURL+'" />'); 
          $('.imageHolder').html('Generating..'); 
          $.post('image.php',{image: dataURL},function(data){ 
           $('.imageHolder').html(data); 
          }); 
        } 
       }); 
});

image.php：

<? 
    $image = $_POST['image']; 
    echo "<img src='$image' alt='image' />"; 
    $decoded = str_replace('data:image/png;base64,','',$image); 
    $name = time(); 
    file_put_contents("/home/toni005/public_html/toniweb.us/div2img/" . $name . ".png", $decoded); 
    echo '<p><a href="download.php?img='.$name.'.png">Download</a></p>'; 
?>

的download.php：

<? $file = $_GET['img']; 
header('Content-Description: File Transfer'); 
header("Content-type: image/jpg"); 
header("Content-disposition: attachment; filename= ".$file.""); 
readfile($file); 
?>

事情是，圖像生成時，當我點擊下載鏈接下載被摧毀，但圖像無法打開（似乎已損壞）

我錯過了什麼？

可以在這裏測試：http://toniweb.us/div2img/

來源

2013-03-30 Toni Michel Caubet

你應該base64_decode()數據URL。它甚至在URL中說明：data:image/png;base64,...

$decoded = base64_decode(str_replace('data:image/png;base64,', '', $image));

來源

2013-03-30 17:22:15 jwueller

感謝您的回答！現在圖像是有效的！但只有背景，文字缺失......任何想法爲什麼？（你可以在鏈接中測試它，如果你想^^） –

@ToniMichelCaubet：缺少圖像內容可能是客戶端問題。它看起來像html2canvas在複製圖像中的HTML方面並不完美。當使用禁用的行'$（'。imageHolder'）顯示圖像時，文本出現。append（''）;'？ – jwueller

我相信你是對的......其實如果我在wyswyg中爲文本選擇一種顏色，它會將圖像中的內容放在圖像中...嗯，這不再是問題，但如果你有任何想法...... :) –

div與html2canvas的屏幕截圖。發送到PHP，保存：損壞圖像

回答

相關問題