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

时间：2024-04-05 19:40:07

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

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

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

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

html网页保存功能支持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>

	<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图片

html网页保存功能支持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>

    <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

主要用的插件以及地址

演示用代码放在了github

相关文章