如何使用屏幕截图保存相关代码

Question

我必须为我正在做的项目创建一个数据集。任务看起来很简单，我必须创建数百个GUI屏幕截图，每次运行代码时，一个按钮采取随机位置，并保存图像及其CSS代码。 css代码应该具有按钮的位置。

我可以拍摄屏幕并使用屏幕上随机位置出现的按钮进行保存，但是我无法在GUI上保存带有位置的CSS。

我正在使用数学随机函数来更改按钮位置。这是一些代码片段。

<style>
        #container
       {
        width:400px;
        height:400px;
        background-color:red;
       }
       #btn 
       {
           position: absolute;
           color: black;
           width: 120px;
           height: 30px;
       }
    </style>
    <div id="container">
            <button id="btn">Click Me!</button>
    </div>



 Javascript code to pass random number to button position:
 <script>
            var btn = document.getElementById("btn");
            btn.style.top = Math.floor((Math.random() * 200) + 1) + "px";
            btn.style.left = Math.floor((Math.random() * 200) + 1) + "px";
 </script>

保存屏幕截图：

   <script type="text/javascript">
        //window.onload = function () {

            var takeScreenShot = function () {
                html2canvas(document.getElementById("container"), {
                    onrendered: function (canvas) {
                        var tempcanvas = document.getElementById("myCanvas");
                        var context = tempcanvas.getContext('2d');
                        context.drawImage(canvas, 0, 0, 400, 400, 0, 0, 400, 400);
                        var png = ReImg.fromCanvas(document.getElementById('myCanvas')).toPng();
                        var link = document.createElement("a");
                        link.href = tempcanvas.toDataURL('image/png');   
                        link.download = 'screenshot.png';
                        link.click();

                    }
                });
            }
            var myVar = setInterval(takeScreenShot, 5000);
    </script>