FabricJS在替换原始图像后无法保持其宽度。

Question

我正在尝试在编辑画布后替换其中的图像。我需要在替换后保持原始图像的宽度和高度，这是我的代码：

它按预期将新图像替换为旧图像的原始高度和宽度。但是，如果我对旧图像进行了一些更改，然后替换图像，则不会应用更改。

我希望所有对旧图像所做的更改（如其高度、宽度和角度）都能应用于新图像。

canvas.loadFromJSON(JSON.parse(json_data), canvas.renderAll.bind(canvas), function(o, object) {
  if (object.type == 'image') {
    var current_width = object.width;
    var current_height = object.height;

    object.setSrc(url, function() {
      // method#1
      object.scaleToWidth(current_width);
      object.scaleToHeight(current_height);
      canvas.renderAll();
    });
  }
});

- Zakir

Answer 1

obj.set({
 width: current_width,
 height: current_height
})

只需设置宽度和高度，无需使用scaleToWidth和scaleToHeight。

DEMO

var canvas = new fabric.Canvas('canvas1');
fabric.Image.fromURL("https://picsum.photos/200/300?random", function(oImg) {
  oImg.set({
    left: 30,
    top: 30
  })
  canvas.add(oImg);
});

function changeSrc() {
  var json_data = canvas.toJSON();
  canvas.loadFromJSON(json_data, canvas.renderAll.bind(canvas), function(o, object) {
    if (object.type == 'image') {
      var current_width = object.width;
      var current_height = object.height;
      object.setSrc("https://i.imgur.com/4yOoOzl.jpg", function(obj) {
        obj.set({
          width: current_width,
          height: current_height
        })
        canvas.renderAll();
      });
    }
  });
}

canvas {
 border:1px dotted black;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="changeSrc()">Change Src</button>
<canvas id="canvas1" width="400" height="400" style=""></canvas>

- Durga