合并多个画布在一个单一的DIV一起- JQuery

Question

我有一个方法，根据数据在单个divs中创建不同的canvas层。有时一个div会包含多个canvas。这些canvas包含一个图像，通常是PNG。我要做的是把每个canvas都放在一个div中，并渲染为一个canvas，这样每个div都会包含组合的canvases，如果它们有一个以上的话。

下面是我正在做的:

// Loop through each div that contains canvas and combine them
            $(".ifp_container_printing").each(function(index, element) {
                var primaryCanvas = $(this).closest('canvas');
                var thisOne = $(this);
                thisOne.find('canvas').each(function(index, element) {//<!-- grab the canvas for this parent div
                    var childCanvas = $(this).get();
                    childCanvas = childCanvas.getContext("2d");
                    primaryCanvas.drawImage(childCanvas, 0, 0);
                });
            });

这里的问题是，当我到达childCanvas.getCo...时，它告诉我它未定义。

建议或想法?

更新:

下面是div布局的例子，我将从:

<div class="ifp_container_printing ifp_container_printing_15" style="width:100%;" id="ifp_container_printing_15">
    <div class="kineticjs-content" role="presentation" style="position: relative; display: inline-block; width: 1665px; height: 1871px;">
      <canvas width="3330" height="3742" style="padding: 0px; margin: 0px; border: 0px; position: absolute; top: 0px; left: 0px; width: 1665px; height: 1871px; background: transparent;"></canvas>
      <canvas width="3330" height="3742" style="padding: 0px; margin: 0px; border: 0px; position: absolute; top: 0px; left: 0px; width: 1665px; height: 1871px; background: transparent;"></canvas>
    </div>
</div>

Answer 1

您的问题是closest方法的错误使用。它向上遍历树，检查API。

你可以这样重写代码。此代码将在该div的第一个画布上绘制div中的所有画布。

$(".ifp_container_printing").each(function() {
    var allCanvases = $(this).find('canvas');
    var primaryCanvas = allCanvases[0];
    var primaryContext = primaryCanvas.getContext('2d');
    for (var i = 1, len = allCanvases.length; i < len; i++) {
        // iterate through all canvases except the first
        primaryContext.drawImage(allCanvases[i], 0, 0);
    }
});