Error when saving the canvas element using Html2canvas

Question

I am trying to create a screenshot on a click and save the image in the pc. For this I am using the html2canvas plugin. here is my code

<body id="add" style="background-color: white">       
    <label id="contact" style="float: right; cursor: pointer;">Save Me</label>
    <h4>My Name Is <b>SUBHAJYOTI</b> <span style="color:red">MITRA</span></h4>        
    <script>
        $(function() {
            $('#contact').on('click', function() {
                html2canvas($("#add"), {
                    onrendered: function(canvas) {
                        var link = document.createElement('a');
                        link.download = "ScreenShot.jpeg";
                        link.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
                        link.click();
                    }
                })
            });
        });          
    </script>
</body>

Its working nice when click on "Save me" and the save the image. but the background of the image became black. 在此处输入图片说明 Like the above picture. please any one help me.

Answer 1

Yup I solve the problem. I dont know why but the problem is with jpeg. If I change the extension jpeg with png, then the problem is solved.

link.download = "ScreenShot.png";
link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

Error when saving the canvas element using Html2canvas

Question

1 answers

solution1
0 2015-02-04 07:52:38

Error when saving the canvas element using Html2canvas

Question

1 answers

solution1 0 2015-02-04 07:52:38

solution1
0 2015-02-04 07:52:38