html2canvas和dompdf获取空白图像源

时间:2017-05-04 07:32:37

标签: php jquery ajax html2canvas

我正在使用dompdfhtml2canvas

我正在尝试将div转换为图像并通过ajax传输该图像。然后在我的服务器端代码我将该图像处理为pdf。我在创建pdf时使用dompdf。 这是我的代码:

 html2canvas(jQuery("#try_screenshot"), {
                onrendered: function(canvas) {
                    var image = canvas.toDataURL("image/png");
                    jQuery("#screenshot").html("<img src='"+image+"' />");
                    jQuery.ajax({
                        url: "/order/send-email.php",
                        dataType: "json",
                        method: "POST",
                        data: {
                            src: image
                        },
                        success:function(data){
                            console.log(data);
                        }
                    });
                }
            });

这是我的send-email.php代码。

require_once 'dompdf/autoload.inc.php';
use Dompdf\Dompdf;
if(isset($_POST['src'])){

    $dompdf = new Dompdf();
    $imgsrc = $_POST['src'];

    $dompdf->loadHtml("<img src='$imgsrc' />");


    // (Optional) Setup the paper size and orientation
    $dompdf->setPaper('A4', 'landscape');

    // Render the HTML as PDF
    $dompdf->render();
    $output = $dompdf->output();
    $file_name = time().".pdf";
    file_put_contents("pdfs/".$file_name, $output);
}

我的问题是我得到一个空白的pdf文件。

我尝试在浏览器中访问image src,我可以看到This site can’t be reached实际上并不是因为我有这段代码jQuery("#screenshot").html("<img src='"+image+"' />");而且我可以立即看到附加在我的html div中的图片。

图像以base64编码。这是一个示例base64图像的链接。这不是完整的base64图像文本,因为SO不会让我把所有这些都放在一起,因为我超过了30k字。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABJIAAAKUCAYAAABfZBI4AAAgAElEQVR4XuydB7Rc1XX+N0gUSaiBhFCXkFADFVDvXaiCekESojhxTdzimuQfO4kdO3biJMZO3BBCDfXeG0JdoN47oAao0jv6r9825/m+0cy8mXfmvZm5s89aXkZv7mnfOXNnn+98e+8bxKNcunTpmkd1q2oIGAIhROCOO+64IR3Tunjx4o9uuOGGf0pH39anIWAIZCYC165d+3GlSpV+lI7RmY2UDtStT0MgsxFIl42U2ajY6AwBQyAbEfA68JmRlI1LbmM2BIoWgXQZSUYkFe26WuuGQDYiYERSNq6ajdkQCC8C6bKRwouozcwQMATShYARSelC3vo1BEKKQLqMJCOSQrqhbFqGgAcCRiR5gGdVDQFDIOUIpMtGSvlErEFDwBDIeQSMSMr5LWAAGAKpRSBdRpIRSaldR2vNEAgDAkYkhWEVbQ6GQHgQSJeNFB4EbSaGgCGQKQgYkZQpK2HjMARCgkC6jCQjkkKygWwahkAKETAiKYVgWlOGgCHgjUC6bCTvgVsDhoAhYAhEIGBEkm0JQ8AQSCkC6TKSjEhK6TJaY4ZAKBAwIikUy2iTMARCg0C6bKTQAGgTMQQMgYxBwIikjFkKG4ghEA4E0mUkGZEUjv1jszAEUomAEUmpRNPaMgQMAV8E0mUj+Y7b6hsChoAhEImAEUm2JwwBQyClCKTLSDIiKaXLaI0ZAqFAwIikUCyjTcIQCA0C6bKRQgOgTcQQMAQyBgEjkjJmKWwghkA4EEiXkWREUjj2j83CEEglAkYkpRJNa8sQMAR8EUiXjeQ7bqtvCBgChkAkAkYk2Z4wBAyBlCKQLiPJiKSULqM1ZgiEAgEjkkKxjDYJQyA0CKTLRgoNgDYRQ8AQyBgEjEjKmKWwgRgC4UAgXUaSEUnh2D82C0MglQgYkZRKNK0tQ8AQ8EUgXTaS77itviFgCBgCkQgYkWR7whAwBFKKQLqMJCOSUrqM1pghEAoEjEgKxTLaJAyB0CCQLhspNADaRAwBQyBjEDAiKWOWwgZiCIQDgXQZSUYkhWP/2CwMgVQiYERSKtG0tgwBQ8AXgXTZSL7jtvqGgCFgCEQiYESS7QlDwBBIKQLpMpKMSErpMlpjhkAoEDAiKRTLaJMwBEKDQLpspNAAaBMxBAyBjEHAiKSMWQo

我在这里做错了吗?我已经敲了2天了。

非常感谢您的帮助。 感谢。

0 个答案:

没有答案