FabricJS - 性能線程

-3

對不起，如果標題是誤導性的，它是我可以想出的最接近的近似值，哈哈。FabricJS - 性能線程

好吧，所以我使用FabricJS作爲面料打印客戶端的概念驗證，並且它們需要300PPI圖像（即，巨大的怪異）。現在，如果你檢查了我在下面彈出的JsFiddle，你會看到平鋪是用一些似乎工作正常的while循環完成的，除了整個瀏覽器在加載時凍結的事實，這意味着我甚至不能粘裝載機圖標。

我做了一些可怕的錯誤，或者只是覺得它是如何工作的？只要我能夠a）安裝一個裝載機，b）它不會，呃，「他已經死了，吉姆！」我的Chrome。如果有幫助，我會用base64獲取圖像。

大家歡呼！

編輯爲背景，這裏有從上傳的文件創建模式的功能之一：

function renderMirror(){ 
showLoader(); 
var isFullRows = false; 
var rowIndex = 0; 
var totalHeight = 0; 

while(isFullRows == false){ 
    // let's start with filling up the row's columns. start the width at zero. 
    var totalWidth = 0; 
    var isFullCols = false; 
    var colIndex = 0; 

    if(rowIndex % 2){ 
     var isRowMirrored = false; 
    }else{ 
     var isRowMirrored = true; 
    } 

    while(isFullCols == false){ 
     colIndex++ 

     if(rowIndex == 1){ 
      console.log('row'); 
     } 

     if(totalWidth >= canvas.width){ 
      isFullCols = true; 
     } 

     if(colIndex % 2){ 
      var isColMirrored = false; 
     }else{ 
      var isColMirrored = true; 
     } 

     canvas.add(new fabric.Rect({ 
      left: totalWidth, 
      top: totalHeight, 
      fill: pattern, 
      flipX: isColMirrored, 
      flipY: isRowMirrored, 
      height: newImgHeight, 
      width: newImgWidth, 
      selectable: false 
     })); 

     totalWidth+= newImgWidth; 

     // safeguard 
     if(colIndex > 100){ 
      isFullCols = true; 
     } 
    } 

    // now instantiate the row. 
    rowIndex++; 
    if(totalHeight >= canvas.height){ 
     isFullRows = true; 
    } 

    totalHeight+= newImgHeight; 

    // safeguard 
    if(rowIndex > 100){ 
     isFullRows = true; 
    } 
} 
hideLoader(); 
}

整個事情是here，如果你想有一個適當的看一下嗎？

來源

2016-08-22 MitchEff

我在這篇文章中做了一個失誤？不太確定爲什麼這是downvoted。 – MitchEff

在鏈接中沒有小提琴，請添加一些代碼，不要強迫人們打開小提琴或將小提琴轉換爲片段。 – AndreaBogazzi

-2

我已經經歷過類似的生成PDF的東西在300我嘗試了兩種不同的解決方案：

使用webWorkers這將做背景繁重的工作，並不會凍結瀏覽器，但是這種方法在我的用例中稍微慢了一點。
我把第二種方法是創建一個終點，我得到的只是基本的64圖像，然後與圖像的數據我生成使用imagemagick建立在300 DPI的PDF也創建一個虛擬畫布用PDF JS從縮放畫布生成圖像的實際大小，以使其更快一點。

來源

2016-08-24 03:26:55

是的，我正在考慮與第二點類似的事情，基本上以300DPI上傳圖片，然後在引擎中使用較小的版本。哈哈，不知道爲什麼我們都陷入低調。我會標記這個答案。乾杯! – MitchEff

FabricJS - 性能線程

回答

相關問題