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

我认为您应该将action移到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多次裁剪相同的图像

1 个答案: