Hi,
as the image shown above, it has a black border on the right and bottom side, and here is my code for it
mainDiagram.makeImageData({ background: "white", type: "image/jpeg", detail:0.5 });
The fun thing is it never happened while i am developing the program, but when my co-worker run this program on their PC, the output image will “sometimes” has that black border.
So am i missing something, or what can i do to fix this problem?
Thank you!
Calling Diagram.makeImageData without providing any options on how much and how large to render will cause the image to only be as large as the HTML DIV. Might the DIV in your case be smaller than you expect? And how are you handling the resulting image if it is smaller than you might have expected?
You might want to reread GoJS Making Images -- Northwoods Software. Chances are that you will want to call Diagram.makeImageData with an option such as scale: 1.0 or something else.
Hi Walter,
Thanks for the reply and i did try using scale before, but still it has that black border. In fact I used scale first and that black border shows up, which makes me think that it is the scale problem, and that black border didn’t show up after I remove scale. However, the border show up again, that is why i am confused. PS. The black border never show up on my PC, no matter i used scale or no scale.
For the handling the result image, all i did is use that generated Base64 image string and display it on website, and it shows that black border.
Here is the image that i have item at the right side and bottom side
As shown, the output image somehow makes some part of the canvas(right and bottom) into black,while my canvas size is same as the image’s size.
Update:
Ok, we find the problem. According to stackoverflow https://stackoverflow.com/questions/5133879/why-bitmap-to-base64-string-showing-black-background-on-webview-in-android
We changed the format to png and the output image become
mainDiagram.makeImageData({ background: "white", type: "image/png", detail:0.5 });
Therefore, the black border is in fact transparent background and while converting it into jpg format the transparent background become black.
However set the format into png only temporary solved the problem,since our background is white as well. Plus file size for png is bigger then jpg, which mean I can’t keep using it.
Are there any other setting that i need to do when i use makeImageData function?
Thank you
This is unexpected. Can we see this code live somewhere? Or can you put it into a codepen so I can take a look? You can start from this one: https://codepen.io/simonsarris/pen/eGwWYJ
A button below the diagram makes an image and shows it on the page. To make it easier to see, the background is red instead of white.
Hi simon,
Thanks for reply, unfortunately the project is kinda big and i really don’t know how to split it out. Plus due to the company’s policy I can’t give away the source code.
However, my partner notice that the canvas size and div size are different, which might be the reason,
As the image shown the canvas’ width and height are different inside the style(I wonder why it has two height and width attribute).
But, with same coding on my PC the canvas and the div size a both the same, which the problem will not occur.
Ah, as I suspected – somehow the Canvas isn’t the right size.
First, check that you don’t have any CSS accidentally affecting the Canvas. In general you should not be touching anything inside the Diagram’s DIV.
Second, perhaps something has changed the size of that DIV without notifying the Diagram that the DIV has changed size. (Alas, there’s no DOM event that we can depend on for that.) Please read Resizing Diagrams -- Northwoods Software
Hi walter,
Again, thanks for the reply!
I tried to use the method
var div = mainDiagram.div; div.style.width = "1278px"; div.style.height = "618px";
As the image shown, only the second one is affected by the setting but the canvas are still not affected.
And for the CSS problem, we check your website’s example and notice the size for the Canvas is different from the div as well. Which is bigger.
PS. If the size of the canvas is smaller then the div, the transparent part will occur.)
Here is something we notice during the debug,
The PC,which has the problem, if we use IE to open the program the canvas’ size will be the same as the div size, but if i use google chrome the canvas’ size will be smaller and the transparent part occurred.
Same PC as above, and we visit your sample website the canvas and the div size are the same on both IE and Chrome.
My PC, run my program the canvas’ size will be the same as div on chrome, but different on IE(Canvas is bigger on IE).
My PC, run your sample website, Canvas will be bigger on IE,but it will be same on chrome.
After setting the DIV style, do you always call Diagram.requestUpdate?
Small differences in size might be OK due to scrollbars, but this may be browser and platform dependent.
Hi Walter,
I do forget to put requestUpdate after i resize, however it is still the same after i put that code in.(This is driving me crazy…)
Here is how i use it
$( document ).ready(function() {
makeCanvasSizeFitDivSize();
});
This is the function for the resizing
function makeCanvasSizeFitDivSize() {
var div = mainDiagram.div;
div.style.width = "1278px";
div.style.height = "618px";
mainDiagram.requestUpdate();
}
Even though I hard coded width and height for testing purpose, canvas’ size are still smaller then the Div(Again, if i run it on IE it is the same but different on Chrome)
We checked the output image’s properties, and we notice that the size of the image is same as the Div size. Which means the canvas size still some how doesn’t change.
Now I think about it, if it is CSS problem, how come only some PC/user has the problem. And we even change the monitor to check(Testing machine has smaller monitor and we thought that might be the reason, so we put our monitor on the testing machine)
This is very odd, can you reproduce it for me somewhere? Like modify this codepen so it’s the same thing that you’re seeing?
It may be possible that the canvas is larger, if there is DPI scaling (if you have a high-pixel-density display). But smaller is odd.
Hi simon,
Thanks for the reply, and fun thing happened. Today we need to deploy(update) our program on the official website so that the user can use our new added features.
So basically we moved our testing website stuff to the official website(without changing any code). Then we checked the official website, the transparent part is gone! However on the same PC, we run the testing website, the transparent part will occur on the testing website…
Here is the url for the codepen, i tried just purely move the front end stuff into it
But anyways, thank you and walter for helping me get through the problem. i will keep u guys update afterward!
PS1. On the official website’s code, I haven’t add the makeCanvasSizeFitDivSize function yet, and the transparent part is gone already.
PS2. The situation I had mention on those previous post are all on the testing website, because I can only modify stuff on testing website.
Hi
i have the same issue trying to figure out the problem but cant get anything
according to this post try every thing mentioned but no success
now i got the point its about the at my system every thing working fine but at my coworkers system its adding black area or background size is shorter then the actual size
here is some stats and result
my system:
Screen size: 15.6"
Resolution: 1368x768
Operating System: ubuntu 18.04.1 LTS
System: DELL Inspiron15
Exported image:
HTML Generated:
On another system same code same chart
Screen size: 15.6"
Resolution: 1368x768
Operating System: ubuntu 18.04.1 LTS
System: ASUS
exported image:
HTML Generated:
Also set autoScrollRegion:
myDiagram = $(
go.Diagram,
“chart-container”,
{
layout: $(go.LayeredDigraphLayout, {direction:90, layerSpacing: 100 }),
initialDocumentSpot: go.Spot.TopCenter,
initialViewportSpot: go.Spot.TopCenter,
isReadOnly: graphReadOnly,
autoScrollRegion: new go.Margin(0, 0)
}
);
i am trying to solve this from last few weeks but no success
try different type of code like
mydiagram.makeImage
mydiagram.makeImageData
canvas to image
Help need please
Thanks
Precisely what version of go.js are you using? Just evaluate go.version.
What is your call to Diagram.makeImage or makeImageData? Could you call Diagram.makeSvg instead?
Are the windows the same size on both machines? Are the DIV elements the same size? Can you figure out why the Canvas elements are different sizes?
Do you get this problem using different browsers?
@code-rider, can you email me the code that produces this problem, gojs at nwoods.com
Also let me know what GoJS version and what browser you are using.
I have download 1.8.23 version but
console.log(go.version); // return 1.6.22
I have try all three functions Diagram.makeImage, makeImageData and Diagram.makeSvg
but result i same.
Mian div element has widht 100% or auto to fit in every screen size this is why both HTML images has different size but i have also try with fixed width but no success.
All other machines in my office export image with black area but
my system exporting image without any problem
I have try different browsers on other machines but same result
I have also create a code example for debugging and sent to gojs.
Thanks
Thanks. Simon will respond, but in the meantime I suggest that you see why you are still using version 1.6.22. I recall that a long time ago we did fix a bug that was somewhat similar to what you report, but I don’t remember what version that was – it could have been after 1.6.22.
Thanks for reply
i have just updated the gojs version to 1.8.36 but same result
That’s unfortunate. OK, then could you please answer my questions, that I asked before, above? And which browsers are you using?
I have download 1.8.23 version but
console.log(go.version); // return 1.6.22
In the code you sent, you are loading both libraries:
<script src="1.8.23/go-debug.js"></script>
<script src="../../release/go-debug.js"></script>
You need to remove that second line. It is loading the 1.6 library over the 1.8 library you downloaded.
@simon yes i just got this and remove this line
@walter i answered your questions in above comment
in my system
Firefox Quantum 64.0
Chrome: Version 71.0.3578.98 (Official Build) (64-bit)
Making image perfectly
Problemed system :
Firefox Quantum 64.0
Chrome: Version 70.0.3538.77 (Official Build) (64-bit)