Dom-to-image js libarary issue

Question

I am writing a function to render my dom(div with id content) to png image using dom-to-image and upload to my server after rendering, so a async function introduced for waiting to complete image processing, but after the introduction, its rendering abnormally in different browsers. My code for rendering image:

function PrintDiv(div, type) {

    return new Promise((resolve) => {
        imgf.src = '';
        var node = document.getElementById(div);
        const scale = 3;
        var options = {
            height: node.offsetHeight * scale,
            width: node.offsetWidth * scale,
            style: {
                transform: "scale(" + scale + ")",
                transformOrigin: "top left",
                width: node.offsetWidth + "px",
                height: node.offsetHeight + "px"
            }
        };
        domtoimage.toPng(node, options).then(function (dataUrl) {
            imgf.src = dataUrl;
            resolve(true);
        }).catch(function (error) {
            console.error('oops, something went wrong!', error);
            resolve(false);
        });
    });
}

Driver code:

async function savetoserver(){

        if(document.getElementById("sphoto").complete){
        let isImageProcessed=await PrintDiv('content',1);
            if(isImageProcessed){
        // excecute uploading 
            }else{
        //image process failed
        savetoserver();
            }
        }
}

Before changing function savetoserver as async, it was processing correct image,but after adding async keyword its behaving abnormal in different browsers.

expected output:

output in Mozilla Firefox:

output in Chrome:

Here am using separate div to display all contents, eg:

<div id="name" style="top:103px;left:83px">name</div>
<div id="dob" style="top:200px;left:83px">dob</div>

Answer 1

my issue solved by adding css width property to all div elements.

ie: I needed maximum of 300px width for name, so simply I added width=300px,

it look like:

<div id="name" style="top:103px;left:83px;width:300px">name</div>

Thanks