与html2canvas一个div的屏幕截图。发送到PHP，保存的：损坏的图像 [英] Screenshot of a div with html2canvas. Sent to php, saved: Corrupted image

问题描述

我产生画布并把它传递到PHP这样：

I generate the canvas and pass it to php so:

$('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.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：

download.php:

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

问题是，图像生成，当我点击下载链接在下载forzed但图像无法打开（似乎已损坏）

The thing is that the image is generated, when I click the download link the download is forzed but the image cannot be opened (seems to be corrupted)

我是什么失踪？

可以在这里测试： http://toniweb.us/div2img/

推荐答案

您或许应该 base64_de code（） 数据URL。它甚至说，它在URL中：数据：图像/ PNG; BASE64，...

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

这篇关于与html2canvas一个div的屏幕截图。发送到PHP，保存的：损坏的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！