dom to image giving blank images

[manishsatschel]

const nodes = document.querySelectorAll(".pdf-signer-container__signing-node") ?? []

if (nodes) {
nodes.forEach((node) =>{
domToImage.toPng(node).then((resp: any) => {
console.log("resp", resp);
})
} )
}

expected result :- image of each node,

this is one url of the imagees-

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAABCCAYAAAAMuqmTAAAAAXNSR0IArs4c6QAAAcNJREFUeF7t1bERwDAMxLB4/6UzgF2wf6RWI8i8nM9HgMAlcJgQIHALCMOrIPAQEIZnQUAY3gCBJuCP0ZxMjQkIY+zg1m0CwmhOpsYEhDF2cOs2AWE0J1NjAsIYO7h1m4AwmpOpMQFhjB3cuk1AGM3J1JiAMMYObt0mIIzmZGpMQBhjB7duExBGczI1JiCMsYNbtwkIozmZGhMQxtjBrdsEhNGcTI0JCGPs4NZtAsJoTqbGBIQxdnDrNgFhNCdTYwLCGDu4dZuAMJqTqTEBYYwd3LpNQBjNydSYgDDGDm7dJiCM5mRqTEAYYwe3bhMQRnMyNSYgjLGDW7cJCKM5mRoTEMbYwa3bBITRnEyNCQhj7ODWbQLCaE6mxgSEMXZw6zYBYTQnU2MCwhg7uHWbgDCak6kxAWGMHdy6TUAYzcnUmIAwxg5u3SYgjOZkakxAGGMHt24TEEZzMjUmIIyxg1u3CQijOZkaExDG2MGt2wSE0ZxMjQkIY+zg1m0CwmhOpsYEhDF2cOs2AWE0J1NjAsIYO7h1m4AwmpOpMQFhjB3cuk1AGM3J1JiAMMYObt0mIIzmZGpMQBhjB7duExBGczI1JvADjvIAQ58wL9YAAAAASUVORK5CYII=

this is how to image is being printed

[ronghaoZHI]

Can you present your HTML code? I cannot reproduce your question. @manishsatschel

[manishsatschel]

Hi @ronghaoZHI this particular issue was fixed there was some issues during selecting that particular node.

however the images inside the dom are not printable in the final created nodes..

[ronghaoZHI]

@manishsatschel oh..
It will appear when image element inside inline element .
Due to the width or height of inline elements being calculated as zero.
eg: <span> <img src="xxx" /></span> .

bug code: dom-to-image.js#LL557C1-L557C1

function width(node) {
          var leftBorder = px(node, 'border-left-width');
          var rightBorder = px(node, 'border-right-width');
          return node.scrollWidth + leftBorder + rightBorder;
      }

it will work properly being modified like this :

 function width(node) {
           return node.getBoundingClientRect().width || 0;
}
function height(node) {
           return node.getBoundingClientRect().height || 0;
}