使用html2canvas截取的div屏幕截图。发送至php后保存时出现：图片损坏。

Question

我生成画布并将其传递给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/

- Toni Michel Caubet

Answer 1

你应该使用base64_decode()函数对数据URL进行解码。这在URL本身中就已经说明了：data:image/png;base64,...

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

- jwueller

---

谢谢您的回答！现在图像是有效的！但只有背景，文字不见了...有什么想法吗？（如果您想测试它，可以在链接中进行^^） - Toni Michel Caubet

@ToniMichelCaubet：缺少图像内容可能是客户端问题。看起来html2canvas在复制图像中的HTML方面并不完美。当使用禁用行$('.imageHolder').append('<img src="'+dataURL+'" />');显示图像时，文本是否存在？ - jwueller

我相信你是正确的...实际上，如果我在所见即所得编辑器中选择了文本颜色，它确实会将内容放入图像中...不过现在这不再是问题了，但如果你有什么想法... :) - Toni Michel Caubet