jquery - 防止某些元素渲染 Canvas

Question

This是我的网站。

我希望我的导航元素的背景变得模糊...我为此使用了 html2canvas 和 stackblur，你可以找到 the tutorial here .

我现在的问题是我想排除导航元素在 Canvas 中渲染，因此它仅在滚动时显示背景。目前仅适用于 WebKit浏览器，因为我不知道如何添加多个属性:

"-webkit-transform",

这是我的代码:

<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>

Answer 1

我在 html2canvas 更新中找到了这个: Added support for "data-html2canvas-ignore" attribute

为了防止渲染 DOM 元素，您需要在元素中添加 data-html2canvas-ignore 属性:

var test = document.getElementById("test");
var content = document.getElementById("content");

test.onclick = function () {
    html2canvas(content, {
        "onrendered": function(canvas) {
            document.body.appendChild(canvas);
        }
    });
};

<script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<p>
  <a id="test" href="javascript:void(0);">test</a>
</p>

<div id="content">
    <div class="element-1">1. Is visible</div>
    <div class="element-2" data-html2canvas-ignore="true">2. No visible</div>
    <div class="element-3">3. Is visible</div>
</div>