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

Question

我想从一张桌子的照片中获取单元格。我有图像中单元格的坐标。现在我想用konvajs库查看我的单元格。问题是表格是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没有本地调用图像实例在使用时。