将画布转换为 PDF 会导致浏览器崩溃

Question

我正在使用 Fabric.js 在画布上工作。完成后，我将其放大到上传所需的大小，因为画布的工作区必须适合屏幕，而我实际上传的文件需要大约 .宽度为 14,000 像素，高度为 8,750 像素。如果我创建一个图像，它会在几秒钟内创建它而不会出现问题。当我尝试使用 jsPDF 创建 PDF 时，它崩溃了。

这适用于从 Fabric.js 画布创建图像：

var dataURL = canvas.toDataURL({
                format: 'png',
                multiplier: 20                
            })

 document.write('<img src="' + dataURL + '"/>');

这无法创建 PDF/导致浏览器崩溃：

var dataURL = canvas.toDataURL({
                format: 'png',
                multiplier: 20
            })

            var pdf = new jsPDF();
            pdf.addImage(dataURL, 'PNG', 0, 0);
            pdf.save("download.pdf");
        }

Answer 1

考虑到您的图像尺寸，这只是一项太大的任务，无法在客户端完成。
正如上述解决方案试图指出的那样，无论您使用什么技术，您都需要在服务器端这样做。

Answer 2

JQuery Code:
First you get active object of canvas the go throw
dataArray.push({
                    "objFlipX" : obj_Tshirt_canv.item(i).getFlipX(),
                    "objFlipY" : obj_Tshirt_canv.item(i).getFlipY(),
                    "objWidth" : obj_Tshirt_canv.item(i).getWidth(),
                    "bojHeight" : obj_Tshirt_canv.item(i).getHeight(),
                    "objOriginX" : obj_Tshirt_canv.item(i).getLeft(),
                    "objOriginY" : obj_Tshirt_canv.item(i).getTop(),
                    "objImgSrc" : obj_Tshirt_canv.item(i).getSrc(),
                    "objAngel" : obj_Tshirt_canv.item(i).getAngle(),
                    "objScalex" : obj_Tshirt_canv.item(i).getScaleX(),
                    "objScaley" : obj_Tshirt_canv.item(i).getScaleY(),
                    "objType" : 'image'
                });
$.ajax({
            url : " ",
            type : "POST",
            data : {
                dataArray : dataArray
            },
            cache : false,
            success : function(data) {

                alert("data update successfully");
                hideLoder();
            },
            error : function(xhr, status, error) {
                alert("Not Successfull");
            }
        });
Now crate php file and create object of fpdf like
require ('fpdf.php');
$aaa = $_REQUEST['action'];
$aaa();
function createpdf() {
    $size = Array(840, 990);
    $data = $_REQUEST['dataArray'];
    $width = 280;
    $height = 330;
    $_actualratioWid = 840 / $width;
    $_actualratioHig = 990 / $height;
    $fpdfObj = new FPDF("p", "pt", $size);
    $fpdfObj -> AddPage();
    foreach ($data as $key => $value) {
        $x = $value[objOriginX] * $_actualratioWid;
        $y = $value[objOriginY] * $_actualratioHig;
        $height = $value[bojHeight] * $_actualratioHig;
        $width = $value[objWidth] * $_actualratioHig;
        $_flipx = ($value[objFlipX]);
        $_flipy = ($value[objFlipY]);
        $imgsrc = $value[objImgSrc];
        $dataTppe = $value[objType];
        $rotation = $value[objAngel];
        $color=$value[objcol];
        $randomString = MyStringr();
        $_filename1 = $_SERVER["DOCUMENT_ROOT"] . "path" . $randomString . ".png";
        if ($value[objType] === 'text' && $value[objval] != " ") {//new code to be imp
            $image_src = $_SERVER["DOCUMENT_ROOT"] . " path". $randomString . ".png";
            exec('convert -background transparent -depth 8 -size 500 -fill "' . $color .'" -pointsize 70  label:"' . $value[objval] .'" "'. $image_src.'"');
            $fpdfObj -> Image($image_src, $x, $y);
        } else {// work done
            $imgsrc = str_replace(" path", $_SERVER["DOCUMENT_ROOT"], $imgsrc);
            if ($_flipx == "false" && $_flipy == "false") {
                $fpdfObj -> Image($imgsrc, $x, $y, $height, $width);
            } else if ($_flipy == "true" && $_flipx == "false") {
                    exec(' convert "' . $value[objImgSrc] . '" -flip  ' . $_filename1);
                    $fpdfObj -> Image($_filename1, $x, $y, $height, $width);
            }
            else if($_flipx== "true" && $_flipy=="false")
            {   exec(' convert "' . $value[objImgSrc] . '" -flop ' . $_filename1);
                $fpdfObj -> Image($_filename1, $x, $y, $height, $width);
            }
        }//end else
    }//foreach
    while (true)//generate random file name when cart is added by user in tool
    {
        $filename = uniqid('AddCart', true) . '.pdf';`enter code here`
        if (!file_exists(sys_get_temp_dir() . $filename))
            break;
    }
    $fpdfObj -> Output($_SERVER["DOCUMENT_ROOT"] . "path " . $filename);
}//end createpdf ()
function MyStringr()//return random file name
{
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $randstring = '';
    for ($i = 0; $i < 10; $i++) {
        $randstring = $characters[rand(0, strlen($characters))];
    }
    return $randstring;
}