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

Question

我有一个使用优秀FabricJS库的图像板。我试图创造一些＆＃34;钥匙孔＆＃34;查看＆＃34;预览＆＃34;在页面上的另一个画布上，复制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)'
});

当我离开外围时，我仍然会出现图像模糊现象，但这可以通过设置视口对象无法离开的边界来预测和预防。