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

Question

我使用fabric.js在画布上绘制元素， 我已使用canvas.setZoom()和canvas.getZoom()来调整画布大小， 我还通过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.toDataURL()

之前添加它

viewportTransform是一个6数字矩阵，代表整个变焦/平移变换。