drawImage error

GoJS
1

Hi.


diagram.add(

<span =“Apple-tab-span” style=“white-space:pre”> $(go.Part,

<span =“Apple-tab-span” style=“white-space:pre”> $(go.Picture, {

<span =“Apple-tab-span” style=“white-space: pre;”> source: “images/100x65.fooooooooooooooo”,

<span =“Apple-tab-span” style=“white-space:pre”> width: 200,

<span =“Apple-tab-span” style=“white-space:pre”> height: 200,

<span =“Apple-tab-span” style=“white-space:pre”> errorFunction: function(picture) {

<span =“Apple-tab-span” style=“white-space:pre”> picture.source = “img/120x160.png”;

<span =“Apple-tab-span” style=“white-space:pre;”> <span =“Apple-tab-span” style=“white-space:pre;”> <span =“Apple-tab-span” style=“white-space:pre;”> }

<span =“Apple-tab-span” style=“white-space:pre”> })

<span =“Apple-tab-span” style=“white-space:pre;”> )

);


As above, when I put a wrong value into Source of Picture.

This message(you can see below) sometimes pops up on Chrome. Why does this happen?

InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

I don’t want this message. Please let me know how to make it not seen on the Chrome.

Thanks.

< =“transover-tooltip” style=“text-align: left; border: 1px solid rgb204, 204, 204; -shadow: rgba0, 0, 0, 0.2 0px 2px 5px; : fixed; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; : 2147483647; display: none; left: 22px; top: -1500px; width: 0px; height: 0px; : rgb252, 247, 217;”>< =“transover-tooltip” style=“text-align: left; border: 1px solid rgb204, 204, 204; -shadow: rgba0, 0, 0, 0.2 0px 2px 5px; : fixed; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; : 2147483647; top: -1500px; display: none; : rgb252, 247, 217;”>

2

Thanks for reporting. We’ll take a look and get back to you.

Is the .foo… image a PNG also?

Simon

3

Give 1.4.9 a try: http://gojs.net/latest/index.html

4

Thanks.

6

Hello,
In 2.2.5 version with the following code I’m getting this error:
InvalidStateError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The HTMLImageElement provided is in the ‘broken’ state.

How can I fix it?

$(
	go.Panel,
	'Auto',
	{},
	$(
		go.Picture,
		{
			desiredSize: new go.Size(24, 24),
		},
		new go.Binding('source', 'images', (e) => e[0] ||'')
	),

	$(
		go.Picture,
		{
			desiredSize: new go.Size(10, 10),
			alignment: go.Spot.BottomRight,
		},
		new go.Binding('source', 'images', (e) =>  e[1] ||'')
	)
),```
7

@Michael101sh are you getting this error just when rendering the Diagram? Or when calling Diagram.makeImage or makeImageData?

Also, what is the natural size of the image in question? Are they all 24x24 and 10x10 or some other size? Trying to reproduce this.

8

Yes, when rendering the Diagram, I’m not calling Diagram.makeImage or makeImageData directly. The diagram is containing pictures and the above code should take care of it. This code includes these sizes definitions, worked in an old version of your product.

9

Ohh, I know what the problem is. The path was without ‘/’ prefix. Now it’s working.
Thank you anyway.

10

I see. This was partly a bug with us, we intend to put those “broken” state errors into the console as traces, though it is still up to you to find out why they are happening (most often, as you found, because an image failed to load because of a bad url or something). So it will fail a little more gracefully in the future.