html2canvas + FileSaver - broswer issues

by ticklishoctopus

HTML

<script src="https://raw.githubusercontent.com/eligrey/FileSaver.js/master/FileSaver.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<input type="button" id="btnSave" class="controller-btns" value="Save"/>
<p><div id="testbtn">Testing stuffs.</div></p>

CSS

#testbtn {
  background-image: url('zebra.jpg');
  background-size: cover;
  background-color: #ccc;
  height: 200px;
  width: 300px;
}

JavaScript

$(function () {
                $("#btnSave").click(function () {
                    html2canvas($("#testbtn"), {
                        onrendered: function (canvas) {
                            theCanvas = canvas;
                            document.body.appendChild(canvas);

                            canvas.toBlob(function (blob) {
                                saveAs(blob, "testimage.jpg");
                            });
                        }
                    });
                });
            });