FabricJS - эксплуатационная резьба

Question

Извините, если заголовок вводит в заблуждение, это самое близкое приближение, которое я мог бы придумать, ха-ха.

Хорошо, поэтому я использую FabricJS для доказательства концепции для клиента печати ткани, и им требуются изображения 300PPI (т. Е. Огромные). Теперь, если вы проверите JsFiddle, я выскочил ниже, вы увидите, что тайлинг выполняется с некоторыми циклами, которые, похоже, работают нормально, за исключением того факта, что весь браузер зависает во время загрузки, то есть я не могу даже вверх значок загрузчика.

Я сделал что-то ужасно неправильно, или это просто как это работает? Длительные времена загрузки прекрасны, пока я могу: а) поставить погрузчика, и б) он не делает, мм: «Он мертв, Джим!» мой Chrome. Я получаю изображения с base64, если это вообще помогает.

Приветствует всех!

EDIT Для контекста, вот одна из функций, которая создает шаблон из загруженного файла:

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, если вы хотите иметь надлежащий вид?

Answer 1

я испытал нечто подобное, чтобы генерировать PDF на 300. Я попробовал два различных решения:

1. Использование webWorkers, которые будут делать тяжелую работу на заднем плане и не собирается заморозить браузер, однако этот подход был немного медленнее в моем случае использования.

2. Второй подход, который я принял, - создать конечную точку, где я получаю только изображение с базой 64, а затем с этими данными изображения, которое я генерирую PDF, используя imagemagick для создания PDF при 300 DPI, также создаю виртуальный холст с JS, чтобы создать реальный размер изображения с масштабированного холста, чтобы сделать его немного быстрее.