javascript - change transparent color into white in html2canvas - Stack Overflow

admin管理员组

文章数量:1310156

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?

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?

• javascript
• html
• css
• html2canvas

Share Improve this question Follow edited May 27, 2014 at 14:30 Etheryte 25.3k1212 gold badges7676 silver badges120120 bronze badges asked May 27, 2014 at 13:58 Bhim Prasad AleBhim Prasad Ale 52322 gold badges88 silver badges3131 bronze badges 4

• What kind of background color has your table element in the DOM? According to the documentation background sets the "Canvas background color, if none is specified in DOM. Set undefined for transparent". – nietonfir Commented May 27, 2014 at 14:00
• @nietonfir its while. I am using bootstrap table.<table id="tablePng" class="table" align="center" > – Bhim Prasad Ale Commented May 27, 2014 at 14:06
• And what happens if you don't call the function onload() but manually instead? – nietonfir Commented May 27, 2014 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 Commented May 27, 2014 at 14:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

hope this helps

本文标签： javascriptchange transparent color into white in html2canvasStack Overflow