Question

我有一种方法可以根据数据在单canvas内创建divs的不同图层。有时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>时，它告诉我它未定义。

建议或想法？

更新：

以下是我将从中获取的{{1}}布局示例：

{{1}}

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);
    }
});

将多个画布合并在一个DIV中 - JQuery

1 个答案: