如何从缩放和平移的fabric.js画布中导出图像

Question

我正在使用fabric.js在画布上绘制元素，已经使用canvas.setZoom()和canvas.getZoom()调整画布的大小，还使用了通过canvas.relativePan()进行平移的canvas.relativePan() 。

我想将画布的元素导出为图像，但是导出功能仅导出屏幕上的元素。 从画布中平移或放大到当前视图中不再可见的点的元素不会导出。

我尝试遍历元素以获取最小（顶部和左侧）点和最大（宽度，高度）点，并使用这些参数导出到DataURL，但是我仍然无法获取隐藏的元素。

是否可以在不修改缩放和平移参数的情况下导出图像？

Answer 1

您可能正在使用canvas.toDataURL() ，其中canvas是结构实例，而不是canvas元素。

如果不是，那就是您需要做的。

该功能支持各种参数，但不支持exclude zoom and pan这很好，因为导出始终很容易：

在导出之前，保存viewportTransfrom的副本，将转换设置为单位矩阵，然后还原。

var transform = canvas.viewportTransform.slice();
canvas.viewportTransform = [1, 0, 0, 1, 0, 0];
var dataurl = canvas.toDataURL(...your options....);
canvas.viewportTransform = transform;

在这种情况下，您不应使用canvas.setViewportTransform() ，因为它将重置所有对象的边界框和交互点，并且您可能不希望这样做。

canvas.renderAll()在导出之前对canvas.renderAll()进行调用，但是如果不起作用，则在调用canvas.toDataURL()之前添加它。

viewportTransform是一个由6个数字组成的矩阵，它整体上表示缩放/平移转换。