FabricJS canvas 在另一个 canvas 元素中的小型实时预览

Question

我有一个使用出色的 FabricJS 库的图像板。我正在尝试在页面上的另一个 canvas 上创建某种 "keyhole" 视图 "preview"，复制 fabricJS 的一小部分 canvas，并将其显示在第二个 canvas 使用 context.drawImage()

preview_canvas_context.drawImage(fabric.lowerCanvasEl, x,y, ...)

效果很好！我的问题是从复制的图像中重影。我不确定 FabricJS 在后台做了什么花哨的东西，但是如果我在织物 canvas 上的图像或对象后面有一些空白 space，（或者我到达 canvas) 复制的图像出现污迹，如下面的屏幕截图所示：

为什么会发生这种情况，我该如何解决？

Answer 1

在 canvas 上设置背景图片或颜色可防止出现此问题。

var canvas = new fabric.Canvas('c', {
  backgroundColor: 'rgb(255,255,255)'
});

当我离开外围时，我仍然会出现图像模糊，但这是可以预料的，并且可以通过设置视口对象不能离开的边界来防止。

Small live preview of FabricJS canvas in another canvas element