javascript - 如何使用 konva.image 多次裁剪同一图像

Question

我正在尝试从带有表格的照片中获取单元格。我有图像中细胞的坐标。现在我想使用 konvajs 库查看我的单元格。问题是 table 是 30x30。所以我有900个细胞。当使用 kanva.image 900 次时，浏览器停止工作，因为它尝试加载 900 次相同的图像。我想加载一次图像并将其用于裁剪 900 次。这是我的代码:

function add_i(layer,cell,row,weight,k,cloneI){         

        layer.add(cloneI);

        cloneI.crop({
              x: parseInt(cell.x),
              y: parseInt(row.y),
              width: cell.width,
              height: row.height
            });
            cloneI.width(cell.width);
            cloneI.height(row.height);
            cloneI.y(row.y);
            cloneI.x(cell.x);

    }
    layerP.push( new Konva.Layer());
    if(weight.stage == 'pred'){
      var cloneI = new Konva.Image({
            id:'img_'+k,
            draggable: true
      });
      var clone = new Image();

      clone.onload = function() {
            cloneI.image(clone);               

            layerP[0].draw();
      };


      for (var i in weight.predictions){
        var row = weight.predictions[i];
        for (var j in row.cells){
          var cell = row.cells[j];  
          add_i(layerP[0],cell,row,weight,k,cloneI.clone());              

          k+=1;
        }
        if(i==4 && false)
          break;
      }
      clone.src = weight.path_i;
      stage.add(layerP[0]); 
    }

Answer 1

我认为你应该将 add_i 移动到 clone.onload 中，如下所示:

function add_i(layer, cell, row, weight, k, cloneI) {

  layer.add(cloneI);

  cloneI.crop({
    x: parseInt(cell.x),
    y: parseInt(row.y),
    width: cell.width,
    height: row.height
  });
  cloneI.width(cell.width);
  cloneI.height(row.height);
  cloneI.y(row.y);
  cloneI.x(cell.x);

}
layerP.push(new Konva.Layer());
if (weight.stage == 'pred') {
  var clone = new Image();

  clone.onload = function() {
    var cloneI = new Konva.Image({
      id: 'img_' + k,
      draggable: true,
      image: clone
    });

    for (var i in weight.predictions) {
      var row = weight.predictions[i];
      for (var j in row.cells) {
        var cell = row.cells[j];
        add_i(layerP[0], cell, row, weight, k, cloneI.clone());

        k += 1;
      }
      if (i == 4 && false)
        break;
    }
    layerP[0].draw();
  };
  clone.src = weight.path_i;
  stage.add(layerP[0]);
}

因为 add_i 在 onload 回调之前被调用，因为 Konva.Image 即，cloneI 在使用时没有 native 图像实例.