如何使用Konva.image多次裁剪相同的图像

Question

我正在尝试从带有表格的照片中获取单元格。 我在图像中有细胞的坐标。 现在我想使用 Konvajs 库查看我的单元格。 问题是该表是 30x30。 所以我有 900 个单元格。 当使用Kanva.image900次时，浏览器停止工作，因为它尝试加载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 在使用时没有本机映像实例。