JAVASCRIPT: объединить HTML-холсты по горизонтали и вертикали в веб-работника - PullRequest
Новая
       26

JAVASCRIPT: объединить HTML-холсты по горизонтали и вертикали в веб-работника

0 голосов
/ 20 февраля 2019

Я хочу объединить количество холстов по горизонтали и вертикали.Поскольку это требует больших вычислительных ресурсов, я хочу использовать веб-работника для выполнения этой задачи, чтобы он не блокировал пользовательский интерфейс.Я знаю, что полотна нельзя отправить веб-работнику, поскольку они являются частью DOM.Как этого добиться или как отправить холсты веб-работнику и получить вновь объединенный холст.

Я использую следующий код для горизонтальной укладки холстов: 

public getCombinedHorizontalCanvas(canvasArr: HTMLCanvasElement[]) {
    const newCanvas = document.createElement('canvas');
    const ctx = newCanvas.getContext('2d');
    const dimen = this.getDimensionsOfCanvas(canvasArr);
    newCanvas.width = dimen.combinedWidth;
    newCanvas.height = dimen.maxHeight;

    let x = 0;
    for (let id = 0; id < canvasArr.length; ++id) {
        ctx.beginPath();
        ctx.drawImage(canvasArr[id], x, 0, canvasArr[id].width, newCanvas.height);
        x += canvasArr[id].width;
    }

    return ;
}

// to get the dimensions for the canvas
private getDimensionsOfCanvas(canvas: HTMLCanvasElement[]) {
    let maxWidth = Number.NEGATIVE_INFINITY;
    let maxHeight = Number.NEGATIVE_INFINITY;
    let combinedWidth = 0;
    let combinedHeight = 0;
    for (let id = 0; id < canvas.length; ++id) {
      maxWidth = Math.max(maxWidth, canvas[id].width);
      maxHeight = Math.max(maxHeight, canvas[id].height);
      combinedHeight += canvas[id].height;
      combinedWidth += canvas[id].width;
    }

    return {
      maxHeight: maxHeight,
      maxWidth: maxWidth,
      combinedHeight: combinedHeight,
      combinedWidth: combinedWidth
    };
}
...