js svg转图片格式

亦凉 2021-11-09 06:20 712阅读 0赞

### 1.情景展示 ###

闲来无事的时候，发现chrome扩展程序里面有图像，本想下载下来，却发现文件格式是svg格式，如何将svg文件改成图片格式？

chrome-extension://jlgkpaicikihijadgifklkbpdajbkhjo/image/rating/1-stars.svg

![1120344-20190715095634693-504149794.png][]

![1120344-20190715095526694-130586665.png][]

### 2.解决方案 ###

第一，JavaScript文件。

(function (global) {
        global.svgToImg = function (svgHtml) {
            this.svgHtml = svgHtml;
        };
        global.svgToImg.prototype = {
            /**
             * svg转图片
             * @description
             * 1.将svg转base64；
             * 2.将base64格式的svg转指定的图片格式并下载
             * @param fileName
             * 图片名称
             * @param imgType
             * 图片类型：jpg/png/bmp
             *
             */
            change:function (fileName,imgType) {
                var This = this;
                //1.给svg标签添加属性：version和xmlns
                [
                    ['version', 1.1],
                    ['xmlns', "http://www.w3.org/2000/svg"],
                ].forEach(function(item){
                    This.svgHtml.setAttribute(item[0], item[1]);
                });
                // 2.获取到svg标签+标签内的所有元素
                var str = This.svgHtml.parentNode.innerHTML;
     
                //3.创建img
                var img = document.createElement('img');
     
                // 4.svg格式的base64图像
                img.setAttribute('src', 'data:image/svg+xml;base64,'+ btoa(unescape(encodeURIComponent(str))));
                //base64格式的svg
                //document.getElementById('baseSvg').src='data:image/svg+xml;base64,'+ btoa(unescape(encodeURIComponent(str)));
                
                // 5.转换成指定图片格式
                img.onload = function(){
                    // 1.创建canvas
                    var canvas = document.createElement('canvas');
                    var context = canvas.getContext("2d");
     
                    canvas.width = img.width;
                    canvas.height = img.height;
                    // 2.根据base64格式的svg生成canvas
                    context.drawImage(img, 0, 0);
                    
                    // 3.将canvas转字符串（按指定好的图片格式）
                    var canvasData = canvas.toDataURL("image/" + imgType);
                    // 4.创建图片元素
                    var img2 = document.createElement('img');
                    // 5.生成图片
                    img2.setAttribute('src', canvasData);
                    
                    // 6.下载该图片
                    img2.onload = function () {
                        var a = document.createElement("a");
                        // 下载
                        a.download = fileName + "." + imgType;
                        a.href = img2.getAttribute('src');
                        a.click();
                    };
                };
            }
        }
    }(this));

第二，HTML页面。

<body>
        <div id="svgContainer">
            
            <svg xmlns="http://www.w3.org/2000/svg" width="86" height="98" viewBox="0 0 86 98">
                <g fill="none" fill-rule="evenodd">
                    <circle cx="42.8" cy="42.8" r="42.8" fill="#FED230"/>
                    <path stroke="#000" stroke-linecap="round" stroke-width="2.4" d="M33.6 35.4a6.6 6.6 0 0 0-13.2 0M64 35.4a6.6 6.6 0 0 0-13.2 0"/>
                    <circle cx="42.8" cy="66.8" r="8" fill="#000"/>
                    <rect width="11.6" height="67.6" x="21.2" y="30" fill="#1C85FF" fill-opacity=".694" rx="5.8"/>
                    <rect width="11.6" height="67.6" x="51.6" y="30" fill="#1C85FF" fill-opacity=".694" rx="5.8"/>
                </g>
            </svg>
        </div>
        <button οnclick="change()">change</button>
        
        <img src="" id="baseSvg"/>
    </body>

第三，引入JS代码

<script src="svgToImg.js"></script>
    <script>
        var svgToImg;
        window.onload = function() {
            // 获取到svg标签
            var svg = document.querySelector('svg');
            // 实例化对象
            svgToImg = new svgToImg(svg);   
        }
        
        // 下载
        function change() {
            // svg转图片
            svgToImg.change('Marydon','jpg');
        }
    </script>

### 3.效果展示 ###

![1120344-20190715105231910-1837222642.png][]

### 写在最后 ###

哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！

###  相关推荐： ###

*  [个人主页][Link 1]

转载于:https://www.cnblogs.com/Marydon20170307/p/11187571.html

[1120344-20190715095634693-504149794.png]: /images/20211109/c5049dd68de548308b620c0a0dd5ad9f.png
[1120344-20190715095526694-130586665.png]: /images/20211109/a9751e95022f409faae98682abcec1dd.png
[1120344-20190715105231910-1837222642.png]: /images/20211109/ec5783adf6cb4082a75189942b9700ac.png
[Link 1]: https://www.cnblogs.com/Marydon20170307

发表评论取消回复

表情：

评论列表（有 0 条评论，712人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现svg图形转存为图片供下载、导出、打印

们知道canvas画布可以很方便的[js][]原生支持转为图片格式并下载，但是svg矢量图形则并没有这方面原生的支持。研究过HighChart的svg图形的图片下载...

野性酷女/ 2024年04月17日 16:19/ 0 赞/ 50 阅读

相关 Java PDF转HTML、Word、图片、SVG、XPS、 PDF/A等格式文件

这篇文章介绍如何在Java应用程序中将PDF转换为HTML、Word、图片、SVG、XPS、PDF/A等格式。本文所使用的PDF组件： Free Spire.PDF fo

拼搏现实的明天。/ 2023年10月18日 13:13/ 0 赞/ 81 阅读

相关 python将svg的html转成png图片。

文章目录说明：实现：svg转png 报错：no library called "cairo" was found

以你之姓@/ 2023年01月17日 06:30/ 0 赞/ 277 阅读

相关 png转svg格式并上传至iconfont

实现方案： 1. 下载转换工具inkscape 2. 登录阿里图标上传svg inkscape中文版安装教程：百度网盘链接：[https://pan.baidu

ゝ一纸荒年。/ 2022年11月19日 12:51/ 0 赞/ 614 阅读

相关图片转json格式_怎么把图片转换成pdf格式？图片转PDF方法

我们在日常的工作中会涉及到很多的图片文件，并且我们经常需要将这些文件转换成PDF格式。因为一方面，图像是分散的，所以在需要使用它们不方便找到它们；另外一方面，我们将图片转换

ゞ浴缸里的玫瑰/ 2022年10月24日 05:48/ 0 赞/ 350 阅读

相关 SVG格式图片转成HTML中SVG的Path路径

svg的图片右键-记事本打开 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

快来打我*/ 2022年10月17日 10:54/ 0 赞/ 220 阅读

相关将图片转化成SVG格式（亲测可行）

1.准备好要转化的图片 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

冷不防/ 2022年10月13日 05:19/ 0 赞/ 463 阅读

相关 SVG路径字符串格式

<table> <thead> <tr> <th>命令</th> <th>名称</th> <th>参数</th> </tr> </t

本是古典何须时尚/ 2022年04月04日 11:56/ 0 赞/ 245 阅读

相关 js svg转图片格式

1.情景展示　　闲来无事的时候，发现chrome扩展程序里面有图像，本想下载下来，却发现文件格式是svg格式，如何将svg文件改成图片格式？ chrome-ex

亦凉/ 2021年11月09日 06:20/ 0 赞/ 713 阅读

相关小程序图片转base64格式图片

var FileSystemManager = wx.getFileSystemManager() var filedata = FileSystemManag

落日映苍穹つ/ 2021年07月27日 02:57/ 0 赞/ 606 阅读