Dom-to-image js 库问题答案

【问题标题】：Dom-to-image js libarary issueDom-to-image js 库问题
【发布时间】：2021-08-11 13:07:11
【问题描述】：

我正在编写一个函数来使用 dom-to-image 将我的 dom（带有 id 内容的 div）渲染为 png 图像并在渲染后上传到我的服务器，因此引入了一个异步函数来等待完成图像处理，但在介绍，它在不同的浏览器中呈现异常。 我的图片渲染代码：

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);
        });
    });
}

驱动代码：

async function savetoserver(){

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

在将函数savetoserver改为async之前，它处理的是正确的图像，但是在添加async关键字后，它在不同的浏览器中表现异常。

预期输出：

Mozilla Firefox 中的输出：

Chrome 中的输出：

这里使用单独的 div 来显示所有内容，例如：

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

【问题讨论】：

标签： javascript html css image-processing dom-to-image

【解决方案1】：

通过向所有 div 元素添加 css width 属性解决了我的问题。

ie：我需要最大 300px 宽度作为名称，所以我简单地添加了 width=300px，

看起来像：

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

谢谢

【讨论】：