Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

javascript - change transparent color into white in html2canvas

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

hope this helps


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...