Jquery 防止在画布上渲染某些元素

这是我的网站 我想让导航元素的背景变得模糊。。我使用了html2canvas和stackblur，你可以在教程中找到我的问题是现在我想在画布中不渲染nav元素，所以它只在滚动时显示背景（目前它只在wekit浏览器中工作，因为我不知道如何向其添加多个属性）

“-webkit转换”

提前谢谢。这是我的代码：

<script>
    $(function () {
    html2canvas($("body"), {
        onrendered: function (canvas) {
            $("div.blurnav, div.blurnav.small").append(canvas);
            $("canvas").attr("id", "canvas");
            stackBlurCanvasRGB(
                'canvas',
            0,
            0,
            $("canvas").width(),
            $("canvas").height(),
            20);
        }
    });
    vv = setTimeout(function () {
        $("body").show();
        clearTimeout(vv);
    }, 200);
    });

    $(window).scroll(function () {
    $("canvas").css(
        "-webkit-transform",
        "translatey(-" + $(window).scrollTop() + "px)");
     });

     window.onresize = function () {
    $("canvas").width($(window).width());
     };

     $(document).bind('touchmove', function () {
     $("canvas").css(
        "-webkit-transform",
        "translatey(-" + $(window).scrollTop() + "px)");
     });

    $(document).bind('touchend', function () {
    $("canvas").css(
        "-webkit-transform",
        "translatey(-" + $(window).scrollTop() + "px)");
     });

        </script>

$（函数（）{
html2canvas（$（“正文”）{
onrendered：函数（画布）{
$（“div.blurnav，div.blurnav.small”）.append（画布）；
$（“canvas”）.attr（“id”，“canvas”）；
stackBlurCanvasRGB(
“画布”，
0,
0,
$（“画布”）.width（），
$（“画布”）.height（），
20);
}
});
vv=设置超时（功能（）{
$（“body”）.show（）；
清除超时（vv）；
}, 200);
});
$（窗口）。滚动（函数（）{
$（“画布”）.css(
“-webkit转换”，
“translatey（-”+$（窗口）.scrollTop（）+“px）”；
});
window.onresize=函数（）{
$（“画布”）.width（$（window.width（））；
};
$（文档）.bind（'touchmove'，函数（）{
$（“画布”）.css(
“-webkit转换”，
“translatey（-”+$（窗口）.scrollTop（）+“px）”；
});
$（文档）.bind（'touchend'，函数（）{
$（“画布”）.css(
“-webkit转换”，
“translatey（-”+$（窗口）.scrollTop（）+“px）”；
});

我在html2canvas中找到了此更新

要防止呈现DOM元素，需要在元素中放置

data-html2canvas-ignore

属性：

var test=document.getElementById（“test”）；
var content=document.getElementById（“内容”）；
test.onclick=函数（）{
html2canvas（内容{
“onrendered”：函数（画布）{
document.body.appendChild（画布）；
}
});
}；

1.是可见的
2.不可见
3.是可见的

假设您想隐藏以下div

<div class="SomeClassOfYours" id="sampleDiv">

然后，只需在div中添加以下行

<div class="SomeClassOfYours" id="sampleDiv" data-html2canvas-ignore="true">

就这样！！你的问题解决了！！

---

感谢@Guilherme\u Nascimento！你真是个了不起的兄弟！！

它忽略了那个div，但却为那个div添加了额外的空格。@MuneemHabib是的，他必须创建这个空间，因为这个空间只是为了保留其他元素，这就像是一个

振动：隐藏的
而不是一个
显示：无
。如果你想完全删除一个在运行html2canvas之前从渲染中删除元素，只需应用display:none，然后在
onrendered
事件之后删除
display:none
。