另一个画布元素中 FabricJS 画布的小型实时预览

Question

我有一个使用出色的 FabricJS 库的图像板。我正在尝试在页面上的另一个画布上创建某种“钥匙孔”视图“预览”，复制 fabricJS 画布的一小部分，并使用 context.drawImage()

在第二个画布上显示它

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

这很好用！我的问题是从复制的图像中重影。我不确定 FabricJS 在后台做了什么花哨的事情，但是如果我在织物画布上的图像或对象后面有一些空白区域，（或者我到达画布的边缘）复制的图像会出现污点，如图所示以下屏幕截图：

为什么会发生这种情况，我可以做些什么来解决它？

Answer 1

在画布上设置背景图像或颜色可防止发生此问题。

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

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