Prevent some elements from being rendered canvas

Question

This is my website.

I want the background of my nav-element to be blurred... I used html2canvas and stackblur for this, and you can find the tutorial here.

My problem is now that I want to exclude the nav-element from being rendered in canvas, so it only shows the background when scrolling. Currently it’s only working in WebKit browsers, because I don’t know how to add multiple properties to:

"-webkit-transform",

This is my code:

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

score 27 · Accepted Answer · edited Jan 08 '22 at 11:39

27

I found this in html2canvas updates: Added support for "data-html2canvas-ignore" attribute

For preventing render of a DOM element, you need add the data-html2canvas-ignore attribute in your element:

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>

edited Jan 08 '22 at 11:39

Peter Mortensen

30,738
21
105
131

answered Jan 01 '15 at 22:51

Protomen

9,471
9
57
124

It is ignoring that div but it is adding extra whitespace for that div. – Muneem Habib May 02 '21 at 05:24
@MuneemHabib yes, he has to make the space, because this space is just to keep the other elements, this is like a `vibility:hidden` and not a `display:none`. If you want to completely remove an element from the rendering before running html2canvas just apply display: none and after the `onrendered` event remove the `display:none`. – Protomen May 02 '21 at 16:13

score 6 · Answer 2 · edited Jan 08 '22 at 11:29

6

Let us say you want to hide the following div.

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

Then, just add the following line in the div.

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

And that's it! Your problem is solved.

edited Jan 08 '22 at 11:29

Peter Mortensen

30,738
21
105
131

answered Sep 18 '15 at 10:00

Prevent some elements from being rendered canvas

2 Answers2