Question

我正在使用html2canvas拍摄我的页面图片，通过ajax将图像数据发送到php，现在我试图让php将图像数据转换为pdf。这就是我所拥有的：

$("a[name='download_report']").click(function(e) {
    e.preventDefault();
    var button = $(this);
    button.addClass("disabled").attr("disabled", "disabled");

    html2canvas($('#report-wrapper'), {
      onrendered: function(canvas) {
         var img = canvas.toDataURL("image/png");

         $.ajax({
             'url' : "{{route('report.download')}}",
             'type' : 'POST',
             'dataType' : "json",
             'data' : {img:img},
             'timeout' : 15000
         }).success(function() {
            button.removeClass("disabled").removeAttr("disabled");
         }).error(function() {
            alert("There was a problem converting this report to a PDF.");
            button.removeClass("disabled").removeAttr("disabled");
         });
      }
    });
});

这就是我在php端的内容：

public function download(Request $request) {
    $img = str_replace('data:image/png;base64,', '', $request->get('img'));
    $img = str_replace(' ', '+', $img);
    $img = base64_decode($img);
}

我不知道从哪里开始将png转换成pdf，然后将其发送回ajax请求，让浏览器自动将其下载为PDF格式。

我知道图像数据是正确的，因为我可以使用javascript将其输出到浏览器并查看正确的图像。

非常感谢来自这里的任何进一步指示。仅供参考，这是一个laravel应用程序，因此是刀片语法。

Answer 1

任何仍在寻找这个问题答案的人，这对我有用：

<强> JS

$('button').on( 'click', function() {
    var screenshot = {};
    html2canvas( [ document.getElementById( 'main-container' ) ], {
        onrendered: function( canvas ) {
            screenshot.img = canvas.toDataURL( "image/png" );
            screenshot.data = { 'image' : screenshot.img };
            $.ajax({
                url: "/image_handler.php",
                data: screenshot.data,
                type: 'post',
                success: function( result ) {
                    console.log( result );
                }
            });
        }
    });
});

<强> PHP

$result = file_put_contents( 'myimage.png', base64_decode( str_replace('data:image/png;base64,','',$_POST['image'] ) ) );

引用＆＃39; halburgiss＆＃39;在此link

通过ajax发送图像数据，转换为pdf，下载？

1 个答案: