html2canvas截图出现问题

Question

可以打印出高度和宽度，为什么会报错宽度或者高度为0

var crs_height=$("#huaxui-dialog-crs").height();
            var crs_width=$("#huaxui-dialog-crs").width();
            console.log('花花高',crs_height)
            console.log('花花宽',crs_width)
            console.log('花花宽')
            html2canvas(document.querySelector("#huaxui-dialog-crs"), {
                // width:750,
                // height:750,
                useCORS:true,
            }).then(function (canvas) {
                //imgUrl即为图片的base64形式
                var jtpostdata = {
                    "sales_agent": hxcjs.getUrlString("sales_agent"),
                    "mode": hxcjs.getUrlString("mode"),
                    "token_wt": hxcjs.getUrlString("token_wt"),
                    "order_no":order_no,
                    "plan_no": plan_no,
                    "type": "9046",
                    "img_src":canvas.toDataURL("image/jpeg",0.5).replace("data:image/jpeg;base64,", '')
                };
                $.ajax({
                    type: 'POST',
                    url: commonurl + 'upload/photo',
                    data: JSON.stringify(jtpostdata),
                    timeout: 30000,
                    contentType: "application/json",
                    async: true,
                    dataType: 'json',
                    success: function(req) {
                        console.log('这里是上传图片成功')
                        if (req.result_code != "0") {
                            $('#loadingToast').hide();
                            hxui.toast("图片上传失败请重新上传");
                        }
                        $('#loadingToast').hide();
                    },
});
            });

Answer 1

【以下回答由 GPT 生成】

可能导致获取到的宽度或高度为0的原因有以下几种情况：

1. 元素尚未加载完全：在调用html2canvas函数之前，请确保元素已经被完全加载到页面上。可以使用window.onload或者document.ready事件来确保元素已经加载完毕。

2. 元素隐藏或者不可见：如果元素设置为display:none、visibility:hidden或者在屏幕外（如position:absolute;left:-9999px），那么获取到的宽度和高度都会为0。请确保元素是可见的。

3. 元素样式问题：有时候，元素的宽度和高度可能被CSS属性设置为0，例如width:0、height:0或者padding:0;margin:0等等。请检查元素的CSS属性，确保它们能够正确地呈现。

4. 元素内容为空：如果元素内部没有内容，或者内容是由其他元素动态生成的，可能导致宽度和高度为0。请确保元素内部有内容或者在尝试截取之前先等待内容加载完毕。

解决方案：

1. 使用window.onload事件确保元素已经加载完毕：

window.onload = function() {
    var crs_height = $("#huaxui-dialog-crs").height();
    var crs_width = $("#huaxui-dialog-crs").width();
    console.log('花花高', crs_height)
    console.log('花花宽', crs_width)

    // 进行html2canvas截图操作
};

1. 检查元素的显示状态和样式，并确保其是可见的：

var $element = $("#huaxui-dialog-crs");
if ($element.is(":visible")) {
    var crs_height = $element.height();
    var crs_width = $element.width();
    console.log('花花高', crs_height)
    console.log('花花宽', crs_width)

    // 进行html2canvas截图操作
} else {
    console.log("元素不可见");
}

1. 检查元素的CSS样式并调整，确保宽度和高度不为0：

#huaxui-dialog-crs {
    width: 100px;
    height: 100px;
}

1. 确保元素内容已加载完毕后再进行截图操作，例如使用setTimeout函数等待一段时间：

setTimeout(function() {
    var crs_height = $("#huaxui-dialog-crs").height();
    var crs_width = $("#huaxui-dialog-crs").width();
    console.log('花花高', crs_height)
    console.log('花花宽', crs_width)

    // 进行html2canvas截图操作
}, 1000); // 等待1秒钟，可以根据实际情况调整等待时间

如果以上方法都不能解决问题，可能是html2canvas库本身的问题或者其他原因导致，此时建议查看官方文档、寻求社区帮助或者尝试其他类似的截图库来实现需求。

【相关推荐】

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/781455
• 这篇博客也不错, 你可以看下html2canvas截图 图片另存并解决图片模糊问题

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^