Hi,
when we are trying to print a large image using makeImageData(), it’s printing only partial image instead of complete.How can we get the entire image?
Probably because of the maxSize property on the options to Diagram.makeImageData. That’s to prevent your app from consuming too much memory. Unless you know your app will only run on desktop/laptop machines, you might want to consider either allowing the scale to be smaller, or to use Diagram.makeSvg instead.
hi,
we are not using makeSVG(), we tried to scale to the smaller, but still it didn’t work.
How can we possibly help you if you won’t show us what you have tried?
hi walter,
we have used following source code to print an image and attached is the output screen.And we are not supposed to use makeSvg() because we are expecting the A base64-encoded string as output.
var img = businessView.diagram.makeImageData({
background: "white",
scale:1,
maxSize: new go.Size(Infinity, Infinity)
});
Assuming that’s the whole image that you just posted, and that it was created with the code that you just quoted – that’s very odd. We’ll try to reproduce the problem.
I assume that you are using the Debug version of the library (go-debug.js) and that there are no errors or warning in the console log.
Oh, what’s the Diagram.documentBounds when you called Diagram.makeImageData? And I might as well ask for the Diagram.viewportBounds, too.
FYI, I have not been able to reproduce any problem – the resulting images have been really wide and really tall (more than 3000 pixels in each direction) and have included all of the Nodes and Links that could be seen (with some scrolling) in the Diagram.
Hi walter,
These are the properties you have asked,and in console we haven’t get any errors.
Diagram.documentBounds.height=3234
Diagram.documentBounds.width=1664
Diagram.viewportBounds.height=196
Diagram.viewportBounds.width=831
And would you send us the sample code with which you have tried producing our problem.
Here’s one way of testing the image-generation functionality in any GoJS sample app. I just tried it in the samples/OrgChartStatic.html sample, but something like this should work in any sample:
First I added an HTML Button and two HTML elements, one for showing the size of the image, and one for holding the generated Image element itself:
<button onclick="makeImage()">Render as Image</button>
<span id="ImageSize"></span>
<div id="ImageArea"></div>
Second I add the implementation of the makeImage function, called by the Button, in the script:
// add an Image rendering of the diagram at the end of this page
function makeImage() {
var img = myDiagram.makeImage({
background: "lightyellow",
scale: 1,
maxSize: new go.Size(Infinity, Infinity)
});
img.style.border = "1px solid lightgray";
var obj = document.getElementById("ImageArea");
obj.appendChild(img);
if (obj.children.length > 0) {
obj.replaceChild(img, obj.children[0]);
}
var info = document.getElementById("ImageSize");
info.textContent = img.width + " x " + img.height;
}
This is a bit different from what I experimented with before (and in a different sample), but the resulting image has always shown the full contents of the diagram.
Remember that supplying a maxSize of Infinity x Infinity will only work when there’s enough memory. A 4000x4000 image may take 64MB.
We have the same issue in Internet Explorer, but not in chrome. The actual image is cropped in IE. I used the code suggested by you and the image size in IE version 11 is showing as 832 x 16384, where as in Chrome version 55 it is 844 x 18364.
That 16384 should be a clue that it’s probably a limitation of IE.