how to make toDataURL render entire virtual canvas, regardless of which part of the stage is showing about konva HOT 8 CLOSED

Please make a demo.

from konva.

Ok, i have reduced the code to the minimum viable reproduceable, here:
https://thebighouseproject.nz/mindmaps/thumbproblem.html (edit:link fixed)

Step 1: Load the page, then Click the save button, and note the image contains the expected bounds.
Step 2: Now drag the stage so that you can see the square labelled -500,-500. (or anywhere really). Click save, and notice the image does not contain the same image as found in step 1. There is large chunks missing.
Step3: click the rezero button. Click save, note the image is now again correct.

Where the stage is dragged to influences the bounds of the image regardless of what config object you send.

Cheers for looking at this man.

from konva.

So the work around for this is:

//upload a mindmap thumbnail
sendthumb: function() {
	
	// There is a quirk in konva that corrupts images if the stage is not at 0,0
	var originalPosition = {
		x: mindmap.stage.x(),
		y: mindmap.stage.y(),
	};
	mindmap.stage.position({x: 0, y: 0});

	var bounds = mindmap.getbounds(); 
	var dataURL = mindmap.stage.toDataURL({
		x: bounds.x,
		y: bounds.y,
		width: bounds.width,
		height: bounds.height
	});

	// Restore the original stage position
	// this stage change seems to occur unnoticably to user
	mindmap.stage.position(originalPosition);
	
	//the rest of the image handling code
	//goes here
	//...
}

from konva.

Position of stage affects stage.toDataURL(). So different output before/after drag is expected to me.

Passing x and y to stage.toDataURL() work like an "offset" from its defined position.

Resetting position to {0, 0} -> exporting -> restoring position back is very valid approach. You can use it if it makes things simpler.

from konva.

Do i get you right, that this would work?

	var originalPosition = {
		x: mindmap.stage.x(),
		y: mindmap.stage.y(),
	};
	var dataURL = mindmap.stage.toDataURL({
		x: -originalPosition.x,
		y: -originalPosition.y,
	});

from konva.

I am not sure about negativing it, but it should work.

from konva.

Ok here is another work around:

				var dataURL = stage.toDataURL({
					x: stage.x() + min.x,
					y: stage.y() + min.y,
					width:  (max.x - min.x),
					height: (max.y - min.y),
				});
				downloadURI(dataURL, 'stage.png');

I am curious what does the stage position have to do with image export? What use case does this behavior support?

from konva.

The default export should capture what is visible on the screen. So position must be applied.

from konva.