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

-1

This是我的网站我想让我的导航元素的背景变得模糊..我用html2canvas和stackblur来做这个，你可以找到教程here.我现在的问题是我想要从画布渲染排除导航元素，所以它只能显示背景滚动时（目前其唯一的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>

来源

2014-12-19 Geatrix

任何人都可以帮忙吗？ – Geatrix 2014-12-19 16:04:59

我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="https://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>

来源

2015-01-01 22:51:13

谢谢，它有帮助。 – Ali 2016-07-29 13:07:24

我们说你想隐藏下面的div。

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

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

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

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

来源

2015-09-18 10:00:53

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

回答

相关问题