How to export image from zoomed and panned fabric.js canvas

Question

I'm using fabric.js to draw elements on canvas, I've used canvas.setZoom() and canvas.getZoom() to resize canvas, I've also used a pan through canvas.relativePan().

I want to export the elements of the canvas as an image but the export function only exports the elements which are on the screen. Elements which are panned out of the canvas or zoomed in to a point that are no more visible in the current view are not exported.

I tried looping through the elements to get min (top and left) point and max (width, height) point and export toDataURL using these parameters but I still can't get the hidden elements.

Is it possible to export the image without modfiying the zoom and pan parameters?

AndreaBogazzi AndreaBogazzi · Accepted Answer · 2017-02-10T08:42:00

You are probably using canvas.toDataURL() where canvas is the fabric instance and not the canvas element.

If not that is what you need to do.

The function support various parameters but not the exclude zoom and pan this is fine since exporting is anyway easy:

before exporting save a copy of your viewportTransfrom, set the transformation to identity matrix, and restore afterwards.

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

You should not use canvas.setViewportTransform() in this case since it will reset all objects bounding boxes and interactions points and maybe you do not want it.

A call to canvas.renderAll() before exporting should not be needed, but if it does not work add it right before calling canvas.toDataURL()

viewportTransform is a 6 number matrix that represent your zoom/pan transformation in its whole.

How to export image from zoomed and panned fabric.js canvas

1 Answers