html网页截图功能支持svg图片保存

根据自己的需求选取对应代码片段，可以节省50%的时间。

现在用到最多的页面截取插件就是html2canvas。将页面转化为canvas进行保存
但是为了兼容支持svg页面的截图，会先将svg页面转化成canvas，再将canvas进行保存

文末有演示代码，可直接使用代码

仅需要支持网页截取功能，页面中无svg图片

• html代码片段
• 《皮皮侠踢皮球》页面中存在svg图片、存在svg普通标签<circle> 、html标签<button>
• 实验证明除了svg图片，其他标签都是可以使用html2canvas进行截图的。

    <div class="container">
        <button class="capture">截图</button>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <image width="100" height="100" preserveaspectratio="none meet" xlink:href="./image/test.png"></image>
            <circle r="20" cx="100" cy="100" stroke="black" fill="red"></circle>
        </svg>
    </div>

• js代码片段
• html2canvas版本 - html2canvas 1.0.0-alpha.12 https://html2canvas.hertzen.com

	<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

        var oBtn = document.querySelector(".capture");

        oBtn.addEventListener("click", function () {
            html2canvas(document.body).then(canvas => {`在这里插入代码片`
                document.body.appendChild(canvas)
            });
        });

支持网页截取功能，页面中有svg图片

• 这里比较麻烦，主要是需要先将svg标签内的所有元素先转化为canvas再进行保存
• 这一部分功能主要体现在js代码中，不过需要注意的是svg标签和svg的图片都需要设定宽高不然会有bug存在！！！
• html代码

        <button class="capture">截图</button>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            style="width:300px;height:150px;">
            <image width="100" height="100" preserveaspectratio="none meet" xlink:href="./image/test.png"></image>
            <circle r="20" cx="100" cy="100" stroke="black" fill="red"></circle>
        </svg>

        <a id="down_button" style="display:none"></a>

• js 代码
• canvg -2.0.0 - beta.1 将svg转化为canvas https://github.com/canvg/canvg
• html2canvas 0.5.0-beta3 将canvas进行图片保存 http://html2canvas.hertzen.com
• 两次引用的html2canvas版本不同

    <script src="./src/canvg.min.js"></script>
    <script src="./src/html2canvas.min.js"></script>

var oBtn = document.querySelector(".capture");

        oBtn.addEventListener("click", function () {
            // 转化成canvas
            var targetDom = $("body");
            // 将当前页面DOM克隆
            var copyDom = targetDom.clone();
            copyDom.find('svg').each(function (index, node) {
                var parentNode = node.parentNode;
                var svg = node.outerHTML.trim();
                var canvas = document.createElement('canvas');
                canvg(canvas, svg, {
                    ignoreAnimation: false,
                    log: true
                });
                if (node.style.position) {
                    canvas.style.position += node.style.position;
                    canvas.style.left += node.style.left;
                    canvas.style.top += node.style.top;
                }
                parentNode.removeChild(node);
                $(parentNode).prepend($(canvas));
            });

            $('html').prepend(copyDom);
            targetDom.hide();

            	// 将克隆的页面（已转化成canvas）保存成图片格式，并下载
                html2canvas(copyDom, {
                    allowTaint: true,
                    taintTest: false,
                    background: '#fff',
                    logging: true,
                    onrendered: function (canvas) {
                        var timestamp = Date.parse(new Date());
                        // 将图片通过a链接下载
                        // canvas.toDataURL() - base64格式
                        $('#down_button').attr('href', canvas.toDataURL());
                        $('#down_button').attr('download', timestamp + '.png');
                        var fileObj = document.getElementById("down_button");
                         fileObj.click();
                         // 将clone页面删除
                         copyDom.remove();
                        targetDom.show();
                    }
                });
        });

注意点

• DOM中svg以及svg中图片需要设置宽高
• html2canvas需要在服务器上运行，官网提供的cdn方式引用支持本地访问
• 两次演示运用的html2canvas版本不同 alpha1.0 和beta3.0

主要用的插件以及地址

• html2canvas 将页面保存在canvas进行图片保存 http://html2canvas.hertzen.com
• canvg 将页面中的svg转化为canvas http://html2canvas.hertzen.com

演示用代码放在了github

• npm install
• npm run server 后可使用
• 地址：https://github.com/YANhappiness/Notes/tree/master/capture