html2canvas plugin producing a transparent Image.

Question

I am working on a project where user can change css properties of some elements inside a div and then on submit, I am doing an html2canvas save for that div so as to save the image. Image is saving but it is transparent. Changes are not reflected.

HTML markup:

<div id="mainCanvas">
    <div id="imageOne"></div>
    <span id="txtOne" class="clTxtOne">Absolute Fun</span>
    <span id="txtTwo" class="clTxtTwo">Some Text</span>
    <span id="txtThree" class="clTxtThree">Another Text</span>
    <span id="slogan">Slogan here</span>
</div>

JS:

$('#mainCanvas').html2canvas({
    background  : undefined,
    logging: true,
    taintTest: false,

    onrendered: function (canvas){
        //Set hidden field's value to image data (base-64 string)
        $('#capturedImage').val(canvas.toDataURL("image/png"));
        //Submit the form manually
        document.getElementById("saveImageForm").submit();
    },
});

Output is an Transparent Image. What could be the possible issue that I am skipping or any other such thing that is not letting my code render. Thanks.

Answer 1

I tried to recreate your task in JSFiddle and got it working immediately. I used documentation from http://html2canvas.hertzen.com/documentation.html.

Try writing your function like this:

    html2canvas($("#mainCanvas"), {
        onrendered: function(canvas) {
            $('#capturedImage').val(canvas.toDataURL("image/png"));
            document.getElementById("saveImageForm").submit();
        }
    });

Here is my JSFiddle with working example... Try changing background by hitting "Change background color" button and then press "Append new one" to generate and append to body new canvas from HTML div "mainCanvas".