防止某些元素被渲染爲畫布

-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

防止某些元素被渲染爲畫布

回答

相關問題