makeImageData function sometimes output a img with black border

GoJS
9

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)

10

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.

11

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.

12

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:
mypc1366x768
HTML Generated:

mypc
mypc1028×135 20.8 KB

This is working fine

On another system same code same chart
Screen size: 15.6"
Resolution: 1368x768
Operating System: ubuntu 18.04.1 LTS
System: ASUS
exported image:
pcwith1366x768
HTML Generated:

big_screen_code
big_screen_code958×148 23.3 KB

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

13

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?

14

@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.

15

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

16

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.

17

Thanks for reply
i have just updated the gojs version to 1.8.36 but same result

18

That’s unfortunate. OK, then could you please answer my questions, that I asked before, above? And which browsers are you using?

19

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.

20

@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)

21

So you are now using 1.8.23. Could you please use 1.8.36 instead? There have been bug fixes since 1.8.23.

What is your call to Diagram.makeImageData?

Do you have any clue why the Canvas sizes are different on their machines? Could you debug on their machines to see whether there is any CSS that is affecting the Canvas element or any Div element within the Diagram’s Div element?

22 
var img = myDiagram.makeImageData({
      scale: 1,
      background: "#fff",
      maxSize: new go.Size(40000, 40000)
    });

I am also trying to get this div size

23

How large are the problem images? 40000x40000 is probably too large for a maximum – that’s about 640MB in memory!

24

some time chart has to many entities and then image become too big
and default max size is shorted then image
but i have set permission on export image if nodes are more then 400 then user is not able to make image but black area in image is coming in every size of image as i show in my post that image is too large

25

OK, I did not know if your images had been clipped in the post.

Do you have the problem on macOS and Windows?

26

Did not tested on macOS yet but on Windows we have same problem

27

OK, thanks for testing on different machines and browsers.

Did you make any progress investigating this possibility?

28

Hi after long wasting of time i got the problem
My tester team was testing my app for different resolutions by changing browser’s zoom level
black area images are exported with browser’s zoom level out
i got this problem when i was debugging for different size of canvas
I am really sorry this is not gojs bug
but after got this problem i try to regenerate this image with black area but with zoom out even you reload the page with zoom out image should be with black area
really don’t know why this happen
All your responses are appreciable
Thank you very much