javascript - 另一个 Canvas 元素中 FabricJS Canvas 的小型实时预览

Question

我有一个使用优秀的 FabricJS 库的图像板。我试图在页面上的另一个 Canvas 上创建某种“锁孔” View “预览”，复制 FabricJS Canvas 的一小部分，并使用 context.drawImage() 将其显示在第二个 Canvas 上。

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

这很好用!我的问题是复制图像中出现重影。我不确定 FabricJS 在后台做了什么奇特的事情，但是如果我在织物 Canvas 上的图像或对象后面有一些空白，(或者我到达 Canvas 的边缘)复制的图像会出现污点，如图所示以下屏幕截图:

为什么会发生这种情况，我可以采取什么措施来解决它？

Answer 1

在 Canvas 上设置背景图像或颜色可以防止出现此问题。

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

当我离开外部边界时，我仍然会出现图像模糊问题，但这是预期的，并且可以通过设置视口(viewport)对象无法离开的边界来防止这种情况。