Search code examples
konvajsreact-konva

How to retrieve clipping region's dataURL?

I am trying to retrieve a clipping region's dataURL, but whenever rects are outside of the region, the resulting image has a margin (I guess that it is trying to include the rects).

Here is an example of the behavior: https://codesandbox.io/embed/clip-area-x24ci

(Click on the "export" button or move the black rectangle outside of the clipping region)

Is is possible to retrieve just the clipping region's content?

Solution

  • You can set x, y, width and height for node.toDataURL() function:

    const clipArea = {
  x: 100,
  y: 100,
  height: 200,
  width: 200
};

const dataURL = node.toDataURL({
  pixelRatio: 2,
  ...clipArea
});