Javascript html2canvas未正确呈现特定数据uri

我有这样的潜水艇

渲染后输出显示如下

html2canvas代码：

html2canvas(document.getElementById('widgetElemet'), {
    logging: true,
    profile: true,
    useCORS: true,
    allowTaint: true,
    onrendered: function(canvas) {
        var dataURL = canvas.toDataURL();

        var param = {
            to: emailToArray.validEmails,
            cc: emailCCArray.validEmails,
            bcc: emailBccArray.validEmails,
            emailid: UserDetails.email,
            subject: emailSubject,
            message: emailMessage,
            ImageDataURI: dataURL
        }

        this.postScreenShot(param)    
    }.bind(this)

})

该图像的数据uri

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIwLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2NCA2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjQgNjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojOTk5OTk5O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTIxLjksMjIuMmMwLDMuNS0yLjksNi40LTYuNCw2LjRzLTYuNC0yLjktNi40LTYuNHMyLjktNi40LDYuNC02LjRTMjEuOSwxOC43LDIxLjksMjIuMnogTTQuMiw1MWwyMi4xLTE5CgkgTTQ2LjUsNTEuMUwyNi40LDMyIE0zNy42LDQyLjZsMTEuNi0xMCBNNjIuNCw0NS4xTDQ5LjIsMzIuNyBNNjMsMUgxdjYyaDYyVjF6IE0xLDUxLjRoNjIiLz4KPC9zdmc+Cg==

---

我刚刚检查了您的

base64 SVG

，看到它显示了

宽度和
高度，这可能就是问题所在

替代解决方案是将与背景图像相同的
base64 SVG
应用到
div
，您的问题将得到解决


window.takeScreenShot=function（）{
html2canvas（document.getElementById（“目标”）{
onrendered：函数（画布）{
document.body.appendChild（画布）；
},
宽度：300，
身高：300
});
}
#目标{
背景图片：url数据：数据：图像/svg+xml；Bas64，PD4，PD4，PD4，PD4，PD4，BBWWWWBWWWWWWBBBBBBBBBBZZZZZZ8，数据数据数据：数据：数据：图像/数据：图像/SVSVG+xml；基础64，基础64，PD4，BBWWWWWBBBBBBBBBWWWWWWWWWWWBBBBBBBBBBBBBBBBBBBBBBBBBBWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV2.2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 GZD0ITIXLJKSMWldMUNS0YLJKSNI40LTYUNCW2JRZLTYUNC0YLJKTNI40LTYUNHYLJKTNI40LDYUNC02LJJJJUOC43LDXLJKSMJUMNOGTTQUMIW1MWYMI4XLTE5GKGTTQ2LJUTUYNI40LdMYIE0ZNY42LdQYLJZSMTEUNI0xMCBNJUNCW0NS4XTDQ5LJISMZYJJJJJJJJJJJJYYYYZYUNYJJJJJJJJJJJJJJJJ0LJJYYYYYYYIZYZYYYF6IELJJJJJJ；
宽度：300px；
高度：300px；
}
钮扣{
显示：块；
高度：20px；
边缘顶部：10px；
边缘底部：10px；
}

为了拍摄图像
我刚刚检查了您的
base64 SVG
，看到它显示了
宽度
和
高度
0
，所以这可能是问题所在

替代解决方案是将与背景图像相同的
base64 SVG
应用到
div
，您的问题将得到解决


window.takeScreenShot=function（）{
html2canvas（document.getElementById（“目标”）{
onrendered：函数（画布）{
document.body.appendChild（画布）；
},
宽度：300，
身高：300
});
}
#目标{
背景图片：url数据：数据：图像/svg+xml；Bas64，PD4，PD4，PD4，PD4，PD4，BBWWWWBWWWWWWBBBBBBBBBBZZZZZZ8，数据数据数据：数据：数据：图像/数据：图像/SVSVG+xml；基础64，基础64，PD4，BBWWWWWBBBBBBBBBWWWWWWWWWWWBBBBBBBBBBBBBBBBBBBBBBBBBBWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV2.2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 GZD0ITIXLJKSMWldMUNS0YLJKSNI40LTYUNCW2JRZLTYUNC0YLJKTNI40LTYUNHYLJKTNI40LDYUNC02LJJJJUOC43LDXLJKSMJUMNOGTTQUMIW1MWYMI4XLTE5GKGTTQ2LJUTUYNI40LdMYIE0ZNY42LdQYLJZSMTEUNI0xMCBNJUNCW0NS4XTDQ5LJISMZYJJJJJJJJJJJJYYYYZYUNYJJJJJJJJJJJJJJJJ0LJJYYYYYYYIZYZYYYF6IELJJJJJJ；
宽度：300px；
高度：300px；
}
钮扣{
显示：块；
高度：20px；
边缘顶部：10px；
边缘底部：10px；
}

我使用的是.png，但html2canvas无法显示.png文件

所以我使用了svg而不是.png——将.png转换为.svg

它对我很有用。
我使用的是.png，但html2canvas无法显示.png文件

所以我使用了svg而不是.png——将.png转换为.svg

它对我很有用。
在我看来，无论html2canvas库在做什么，它都不了解图像的大小，它是一个img标记，还是div上的背景？它与其他标记有什么不同？这一定是一个损坏的图像。试着在photoshop中打开同一个图像，看看它是否损坏。@2pha它的img标记以src作为数据url在所有图像中。@yogendarji图像未被破坏。您可以通过在浏览器上处理数据url字符串进行检查。在我看来，无论html2canvas库在做什么，它都不了解图像的大小，它是img标记还是div上的背景？它与其他图像有什么不同？这一定是破坏的图像。请尝试在pho中打开相同的图像toshop and see这是否损坏。@2pha这是一个img标记，在所有图像中都有src作为数据url。@yogendarji图像没有损坏。您可以通过在浏览器上处理数据url字符串进行检查。@PiyushDhamecha您可以放置样本小提琴吗？问题与您提到的完全相同。.我刚刚通过解码svg添加了高度和宽度作为父高度和宽度d再次编码到base64..谢谢兄弟..@PiyushDhamecha你能放小提琴样本吗？问题和你提到的完全一样..我刚刚通过解码svg添加了高度和宽度作为父高度和宽度，然后再次编码到base64..谢谢兄弟。。