InvalidStateError: CanvasRenderingContext2D.createPattern: Passed-in canvas has height 0 #2268
Comments
|
quick workaround is to change which looks reasonable to me, since you can't do much with image that has w/h = 0. can do a PR if such w/a is acceptable. |
|
We face the same error. Since we've been testing our software with SVG images on constant basis, we think that this bug is related to some of the recent Firefox updates. Other browsers work fine for us. Same library version: 1.0.0-rc.5. Also tried in 1.0.0-rc.7 |
|
I also have this error in the latest version of firefox. On the same page, I do not have this problem in chrome. |
|
Should be fixed in #2409 |
|
Got the same error with the latest html2canvas in my project. So it's not solved. |
|
Error only appear in Firefox. |
1.0.0-rc5
i am rendering Jira issue view page, and rendering seems to break on the svg image:
the image itself is also not very usual: dev tools in firefox show pseudo-elements as follows:
.aui-sidebar[aria-expanded="false"] .jira-navigation .collapsed-scope-filter-container.aui-sidebar-group-actions::after {
background-color: transparent;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTIuMyAxMEgxMVYzLjNIMi4zVjEwek0xIDMuM0MxIDIuNiAxLjUgMiAyLjEgMmg5LjFjLjYgMCAxLjEuNiAxLjEgMS4zVjEwYzAgLjctLjUgMS4zLTEuMSAxLjNIMi4xYy0uNiAwLTEuMS0uNi0xLjEtMS4zVjMuM3ptMy4zIDBWMTBoMS4zVjMuM0g0LjN6bTMuNCAwSDlWMTBINy43VjMuM3ptNiAwYy43IDAgMS4zLjYgMS4zIDEuM3Y4YzAgLjctLjYgMS4zLTEuMyAxLjNoLThjLS43IDAtMS4zLS42LTEuMy0xLjNIMTNjLjQgMCAuNy0uMy43LS43VjMuM3oiIGZpbGw9IiM1MDVmNzkiLz4KPC9zdmc+Cg==") no-repeat center center;
background-size: auto;
border-color: transparent;
background-size: 24px;
border-radius: 3px;
height: 36px;
margin-left: 10px;
margin-right: 10px;
width: 34px;
}
and styles:
aui-sidebar[aria-expanded="false"] .aui-sidebar-group-actions::after {
background: url(/s/1rj25j/712004/b84c78f53a3db5332d73a39e55be59f0/7.9.9//download/resources/com.atlassian.auiplugin:aui-sidebar/images/icons/sidebar/icon-group-actions.svg) no-repeat center center;
background-size: 20px;
border: 1px solid #f4f5f7;
border-top-color: rgb(244, 245, 247);
border-right-color: rgb(244, 245, 247);
border-bottom-color: rgb(244, 245, 247);
border-left-color: rgb(244, 245, 247);
border-radius: 50%;
content: "";
display: block;
height: 32px;
left: 0;
margin-left: 11px;
margin-right: 11px;
position: absolute;
top: 0;
width: 32px;
}
element {
}
.aui-sidebar[aria-expanded="false"] .jira-navigation .collapsed-scope-filter-container.aui-sidebar-group-actions {
width: 46px;
}
.aui-sidebar[aria-expanded="false"] .aui-sidebar-group.aui-sidebar-group-actions, .aui-sidebar[aria-expanded="false"] .aui-sidebar-group.aui-sidebar-group-tier-one {
background: none;
border-radius: 0;
cursor: auto;
padding: 0;
}
.sidebar-content-container.jira-navigation .collapsed-scope-filter-container {
margin-top: 10px;
}
.aui-sidebar[aria-expanded="false"] .aui-sidebar-group-actions {
margin: 10px 0 15px 0;
margin-top: 10px;
height: 32px;
}
.aui-sidebar[aria-expanded="false"] .aui-sidebar-group {
border-radius: 3px;
box-sizing: content-box;
display: block;
line-height: 1.42857143;
padding: 7px 10px;
background-color: transparent;
color: #42526e;
text-decoration: none;
background: url(/s/1rj25j/712004/b84c78f53a3db5332d73a39e55be59f0/7.9.9//download/resources/com.atlassian.auiplugin:aui-sidebar/images/icons/sidebar/icon-group.svg) 50% center no-repeat;
cursor: pointer;
height: 20px;
margin-left: 10px;
margin-right: 10px;
position: relative;
}
.aui-sidebar .aui-sidebar-group {
margin-top: 20px;
margin-bottom: 10px;
padding: 0 10px;
}
html, body, p, div, h1, h2, h3, h4, h5, h6, img, pre, form, fieldset {
margin: 0;
padding: 0;
}
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-moz-osx-font-smoothing: grayscale;
}
body {
color: #172b4d;
}
body {
color: #172b4d;
}
body {
color: #172b4d;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
letter-spacing: 0;
}
error seems to be hit at
if (image) {
html2canvas/src/render/canvas/canvas-renderer.ts
Line 555 in 4dd4a69
here, the image is ok, but for whatever reason it has width and height = 0. if i add debug output here (just console.dir(image), i get the following for this image:
img
accessKey: ""
accessKeyLabel: ""
align: ""
alt: ""
assignedSlot: null
attributes: NamedNodeMap [ crossorigin="anonymous", src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTIuMyAxMEgxMVYzLjNIMi4zVjEwek0xIDMuM0MxIDIuNiAxLjUgMiAyLjEgMmg5LjFjLjYgMCAxLjEuNiAxLjEgMS4zVjEwYzAgLjctLjUgMS4zLTEuMSAxLjNIMi4xYy0uNiAwLTEuMS0uNi0xLjEtMS4zVjMuM3ptMy4zIDBWMTBoMS4zVjMuM0g0LjN6bTMuNCAwSDlWMTBINy43VjMuM3ptNiAwYy43IDAgMS4zLjYgMS4zIDEuM3Y4YzAgLjctLjYgMS4zLTEuMyAxLjNoLThjLS43IDAtMS4zLS42LTEuMy0xLjNIMTNjLjQgMCAuNy0uMy43LS43VjMuM3oiIGZpbGw9IiM1MDVmNzkiLz4KPC9zdmc+Cg==" ]
baseURI: "https://#"
border: ""
childElementCount: 0
childNodes: NodeList []
children: HTMLCollection { length: 0 }
classList: DOMTokenList []
className: ""
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
complete: true
contentEditable: "inherit"
contextMenu: null
crossOrigin: "anonymous"
currentSrc: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTIuMyAxMEgxMVYzLjNIMi4zVjEwek0xIDMuM0MxIDIuNiAxLjUgMiAyLjEgMmg5LjFjLjYgMCAxLjEuNiAxLjEgMS4zVjEwYzAgLjctLjUgMS4zLTEuMSAxLjNIMi4xYy0uNiAwLTEuMS0uNi0xLjEtMS4zVjMuM3ptMy4zIDBWMTBoMS4zVjMuM0g0LjN6bTMuNCAwSDlWMTBINy43VjMuM3ptNiAwYy43IDAgMS4zLjYgMS4zIDEuM3Y4YzAgLjctLjYgMS4zLTEuMyAxLjNoLThjLS43IDAtMS4zLS42LTEuMy0xLjNIMTNjLjQgMCAuNy0uMy43LS43VjMuM3oiIGZpbGw9IiM1MDVmNzkiLz4KPC9zdmc+Cg=="
dataset: DOMStringMap(0)
decoding: "auto"
dir: ""
draggable: true
firstChild: null
firstElementChild: null
height: 0
hidden: false
hspace: 0
id: ""
innerHTML: ""
innerText: ""
isConnected: false
isContentEditable: false
isMap: false
lang: ""
lastChild: null
lastElementChild: null
loading: "eager"
localName: "img"
longDesc: ""
lowsrc: ""
name: ""
namespaceURI: "http://www.w3.org/1999/xhtml"
naturalHeight: 0
naturalWidth: 0
nextElementSibling: null
nextSibling: null
nodeName: "IMG"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 0
offsetLeft: 0
offsetParent: null
offsetTop: 0
offsetWidth: 0
onabort: null
onanimationcancel: null
onanimationend: null
onanimationiteration: null
onanimationstart: null
onauxclick: null
onblur: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragexit: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: function ()
onfocus: null
onformdata: null
onfullscreenchange: null
onfullscreenerror: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: function onload()
onloadeddata: null
onloadedmetadata: null
onloadend: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmozfullscreenchange: null
onmozfullscreenerror: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onseeked: null
onseeking: null
onselect: null
onselectstart: null
onshow: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
ontransitioncancel: null
ontransitionend: null
ontransitionrun: null
ontransitionstart: null
onvolumechange: null
onwaiting: null
onwebkitanimationend: null
onwebkitanimationiteration: null
onwebkitanimationstart: null
onwebkittransitionend: null
onwheel: null
outerHTML: "<img crossorigin="anonymous" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTIuMyAxMEgxMVYzLjNIMi4zVjEwek0xIDMuM0MxIDIuNiAxLjUgMiAyLjEgMmg5LjFjLjYgMCAxLjEuNiAxLjEgMS4zVjEwYzAgLjctLjUgMS4zLTEuMSAxLjNIMi4xYy0uNiAwLTEuMS0uNi0xLjEtMS4zVjMuM3ptMy4zIDBWMTBoMS4zVjMuM0g0LjN6bTMuNCAwSDlWMTBINy43VjMuM3ptNiAwYy43IDAgMS4zLjYgMS4zIDEuM3Y4YzAgLjctLjYgMS4zLTEuMyAxLjNoLThjLS43IDAtMS4zLS42LTEuMy0xLjNIMTNjLjQgMCAuNy0uMy43LS43VjMuM3oiIGZpbGw9IiM1MDVmNzkiLz4KPC9zdmc+Cg==">"
ownerDocument: HTMLDocument https://#
parentElement: null
parentNode: null
part: DOMTokenList []
prefix: null
previousElementSibling: null
previousSibling: null
referrerPolicy: ""
scrollHeight: 0
scrollLeft: 0
scrollLeftMax: 0
scrollTop: 0
scrollTopMax: 0
scrollWidth: 0
shadowRoot: null
sizes: ""
slot: ""
spellcheck: false
src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTIuMyAxMEgxMVYzLjNIMi4zVjEwek0xIDMuM0MxIDIuNiAxLjUgMiAyLjEgMmg5LjFjLjYgMCAxLjEuNiAxLjEgMS4zVjEwYzAgLjctLjUgMS4zLTEuMSAxLjNIMi4xYy0uNiAwLTEuMS0uNi0xLjEtMS4zVjMuM3ptMy4zIDBWMTBoMS4zVjMuM0g0LjN6bTMuNCAwSDlWMTBINy43VjMuM3ptNiAwYy43IDAgMS4zLjYgMS4zIDEuM3Y4YzAgLjctLjYgMS4zLTEuMyAxLjNoLThjLS43IDAtMS4zLS42LTEuMy0xLjNIMTNjLjQgMCAuNy0uMy43LS43VjMuM3oiIGZpbGw9IiM1MDVmNzkiLz4KPC9zdmc+Cg=="
srcset: ""
style: CSS2Properties(0)
tabIndex: -1
tagName: "IMG"
textContent: ""
title: ""
useMap: ""
vspace: 0
width: 0
x: 0
y: 0
: HTMLImageElementPrototype { decode: decode(), alt: Getter & Setter, src: Getter & Setter, … }
The text was updated successfully, but these errors were encountered: