6

I am using javascript library html2canvas to save the table of my project. It works fine but when I save the image it shows transparent background color for PNG and background color black for jpeg. Here is what I did:

<script>
        window.onload = function(){
              html2canvas(document.getElementById("tablePng"),{
                    onrendered: function(canvas){
                    var img = canvas.toDataURL('image/jpeg');
                    $('#saveTable').attr('href',img);
                  }
              });
      };
</script>

Doing these above will save the images but the background colour will be black and when changing var img = canvas.toDataURL('image/png'); the background will be transparent. And adding background as In documentation says:

    <script>
        window.onload = function(){
              html2canvas(document.getElementById("tablePng"),{
                    background: "#fff",
                    onrendered: function(canvas){                     
                    var img = canvas.toDataURL('image/jpeg');
                    $('#saveTable').attr('href',img);
                  }
              });
      };
</script>

will change nothing... give transparent.

So how do I change the background ground color so that the images saved will be readable easily?

Etheryte
  • 24,589
  • 11
  • 71
  • 116
Bhim Prasad Ale
  • 523
  • 1
  • 8
  • 31
  • What kind of background color has your table element in the DOM? According to the [documentation](http://html2canvas.hertzen.com/documentation.html) background sets the "Canvas background color, if none is specified in DOM. Set undefined for transparent". – nietonfir May 27 '14 at 14:00
  • @nietonfir its while. I am using bootstrap table.
     – Bhim Prasad Ale May 27 '14 at 14:06
  • And what happens if you don't call the function `onload()` but manually instead? – nietonfir May 27 '14 at 14:10
  • @nietonfir it won't work. Actually I made a link and when click on that link the download option will appear. When tried using manually I have to make another link to save a image. – Bhim Prasad Ale May 27 '14 at 14:14

1 Answers1

6

simply add css background-color:#ffffff to your table :)

hope this helps

g-newa
  • 459
  • 3
  • 10
  • 1
    what a silly mistake I have made... I was digging only through the html2canvas but my logic was wrong in the table css. Thank You @g-newa. :) – Bhim Prasad Ale May 29 '14 at 07:29
  • who would of thought the need to make the background white on the element rendering a black background...seems simple but was not the first thought to set my white background to white... – CrandellWS Aug 23 '14 at 01:18