如何在不缩放fabricjs的情况下显示另一个画布

Question

简而言之，我正在开发一个项目，其中有两个画布：一个支持缩放和绘图的画布，另一个画布-第一个画布的副本，应该显示不带缩放的普通视图。不幸的是，我不了解如何实现此功能，因为第二个画布还显示了缩放图片。请帮忙！这是我所拥有的一个小例子：

var c1 = document.getElementById("scale");
var c2 = document.getElementById("static");

var canvas = this.__canvas = new fabric.Canvas(c1, {
  isDrawingMode: true
});
var ctx1 = c1.getContext("2d");
var ctx2 = c2.getContext("2d");

function copy() {
    var imgData = ctx1.getImageData(0, 0, 512, 512);
    ctx2.putImageData(imgData, 0, 0);
}

fabric.Image.fromURL(
  "https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg",
  img => {
    img.scaleToWidth(canvas.width);
    canvas.setBackgroundImage(img);
    canvas.requestRenderAll();
  },
  {
    crossOrigin: "Annoymous"
  }
);

canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var pointer = canvas.getPointer(opt.e);
  var zoom = canvas.getZoom();
  zoom = zoom + delta/200;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});
    

setInterval(() => {
    copy();
}, 10)

canvas {
  border: 1px solid black;
}
#static {
  position: relative;
  top: -300px;
  left: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.1/fabric.min.js"> </script>

This is interactive canvas
<canvas id="scale" width="300" height="300"></canvas>

<canvas id="static"width="300" height="300"></canvas>

Answer 1

您的问题是您正在从上下文中获取“ ImageData”但是您应该使用fabric.Canvas对象...

上下文仅提供您所看到的内容，因此，这两个画布将是一幅镜像，您必须从fabric.Canvas中获得数据，该数据具有所有编辑的“大图景”。

在我的原型中，我使用canvas.toJSON来获取数据，然后使用loadFromJSON绘制数据，但是我确实注意到一些闪烁的新图像已加载，因此我决定使用图像而不是静态画布，这样过渡是无缝的

请参阅下面的简单原型：

var c1 = document.getElementById("scale");
var img = document.getElementById("img");
var canvas = new fabric.Canvas(c1, {isDrawingMode: true});

function copy() {
  var data = canvas.toJSON();
  var c = new fabric.Canvas();
  c.loadFromJSON(data,  function() {
    img.src = c.toDataURL('image/png');
  });  
}

fabric.Image.fromURL(
  "https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg",
  img => {
    img.scaleToWidth(canvas.width);
    canvas.setBackgroundImage(img);
    canvas.requestRenderAll();
  }, { crossOrigin: "Annoymous" }
);

canvas.on('mouse:wheel', function(opt) {
  var pointer = canvas.getPointer(opt.e);
  var zoom = canvas.getZoom() + opt.e.deltaY / 200;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.zoomToPoint({
    x: opt.e.offsetX,
    y: opt.e.offsetY
  }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});


setInterval(copy, 200)

canvas {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.1/fabric.min.js">
</script>


<canvas id="scale" width="300" height="150"></canvas>
<img id="img"   width="300" height="150">