KonvaJS - responsive stage and toDataURL full

Question

Does anyone have any idea how to create a responsive stage (which is basically 4000px wide, but is scaled to the width of the device) in such a way that all the images added to it are automatically scaled with the ratio maintained?

And when using the "toDataURL" function, the stage was downloaded in the original size (that is just 4000px) and also matched pictures?

Regards!

lavrton lavrton · Accepted Answer · 2019-01-15T00:01:17

You can use scale for the stage to implement responsive behavior. All nodes (and images) will be scaled on the canvas.

function onResize() {
  const availableWidth = window.innerWidth;
  const availableHeight = window.innerHeight - 50;

  const scale = availableWidth / VIRTUAL_WIDTH;

  stage.setAttrs({
    width: availableWidth,
    height: availableHeight,
    scaleX: scale,
    scaleY: scale
  });
  stage.draw();
}

To get the original size for toDataURL you have to options:

1 resize the stage before exporting to base 64

 const oldSize = stage.size();
 // change size into required size
 stage.size({
  width: 4000,
  height: 2000
 })

 const url = stage.toDataURL();
 // restore size
 stage.size(oldSize);

2 Or use special property pixelRaio to change size of the image.:

// VIRTUAL_WIDTH = 4000
const pixelRatio = VIRTUAL_WIDTH / stage.width();
const url = stage.toDataURL({ pixelRatio });

https://jsbin.com/goqemewolo/3/edit?js,output

KonvaJS - responsive stage and toDataURL full

1 Answers