如何解决Dom-to-image js 库问题
我正在编写一个函数来使用 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 id="name" style="top:103px;left:83px">name</div>
<div id="dob" style="top:200px;left:83px">dob</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。