將畫布轉換爲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

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 = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
    $randstring = ''; 
    for ($i = 0; $i < 10; $i++) { 
     $randstring = $characters[rand(0, strlen($characters))]; 
    } 
    return $randstring; 
} 

Answer 2

鑑於你的圖像尺寸，這在客戶端完成是一項太大的任務。
正如上面的解決方案試圖指出的那樣，無論您使用的技術如何，您都需要在服務器端進行此操作。