Question

This是我的网站我希望我的nav-element的背景模糊。我使用了html2canvas和stackblur，你可以找到教程here.我现在的问题是我要排除nav元素在画布中呈现，所以它只显示滚动时的背景（目前它只在wekit浏览器中工作，因为我不知道如何添加多个属性

＆＃34; -webkit变换＆＃34;，

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

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

Answer 2

我们假设您要隐藏以下div。

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

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

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

就是这样！你的问题解决了!! 感谢@Guilherme_Nascimento！你真是太棒了兄弟!!

防止某些元素被渲染为画布

2 个答案: