1.情景展示

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

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

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标签 -->

        <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 onclick="change()">change</button>

    <!-- base64svg -->

    <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.效果展示

写在最后

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

相关推荐：

 

js svg转图片格式的更多相关文章

  1. SVG小图片格式显示（字符图标，可设置title属性）

    1.HTML + Font 方式: 修改图标颜色只需修改字体颜色,修改图片大小只需修改字体大小. 关于字体图片,我们可以自己制作,也可以从网上下载 阿里巴巴矢量图库. 在线图标字体库.Icomoon. ...

  2. JS验证图片格式和大小并预览

    用于上传图片的js验证: <%@ page language="java" contentType="text/html; charset=UTF-8"p ...

  3. 转: jquery.qrcode.js生成二维码插件&转成图片格式

    原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...

  4. 前端工程师技能之photoshop巧用系列第四篇——图片格式

    × 目录 [1]图片格式 [2]保存设置 前面的话 对于前端来说,图片格式是需要重要掌握的知识.本文是photoshop巧用系列第四篇——图片格式 图片格式 目前在前端的开发中常用的图片格式有jpg. ...

  5. 图片格式转换之ImageMagick

    项目中需要实现一些图片文件到TIFF文件的转换,去网上下载了一些第三方软件. 好的软件需要收费,免费的存在各种问题. 自己动手,丰衣足食! 众里寻他千百度,蓦然回首,那人就是ImageMagick. ...

  6. 关于web上的图片格式问题，新的彩蛋

    我们耳熟能详的几种格式无外乎 png-8,png-24,jpeg,gif,svg. 但是上面的那些都不是能够另人惊喜的答案.关于新技术的是Webp,Apng.(是否有关注新技术,新鲜事物) 1)Web ...

  7. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  8. java通过SVG导出图片

    import java.io.ByteArrayInputStream; import java.io.File; import java.io.FileOutputStream; import ja ...

  9. 【原创】区分png图片格式和apng图片格式的解决办法

    最近公司有个项目,要抓取客户微信公众号的文章,以及文章内容中的图片,并且在图片加上客户自己的水印.我们使用阿里云OSS存储图片和加水印,发现真心好用,提升了我们的开发效率,阿里云现在是越来越强大了.. ...

随机推荐

  1. Java自学-面向对象 属性

    Java类的属性 一个英雄有姓名,血量,护甲等等状态 这些状态就叫做一个类的属性 步骤 1 : 属性的类型 属性的类型可以是基本类型,比如int整数,float 浮点数 也可以是类类型,比如Strin ...

  2. pat 1039到底买不买

    小红想买些珠子做一串自己喜欢的珠串.卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖.于是小红要你帮忙判断一下,某串珠子里是否包含了全部自己想要的珠子?如果是,那么告诉她有多少多余的珠子 ...

  3. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  4. JavaScript 数据类型（基本数据类型）

    JavaScript 数据类型分为简单数据类型和复杂数据类型. 简单数据类别包括 Number.String.Boolean.Undefined 和 Null 共5种. 复杂数据类型只有一个 Obje ...

  5. memcpy函数的实现

    1.按1个字节拷贝 (1)不要直接使用形参,要转换成char* (2)目标地址要实现保存 (3)要考虑源和目标内存重叠的情况 void * mymemcpy(void *dest, const voi ...

  6. OSPF 高级配置

    这是一个综合的实验,包含了静态路由.默认路由.RIP.OSPF四种路由.通过配置,最终实现全网互通. 实验拓扑 如图所示连接,地址规划如下: 名称 接口 IP地址 R1 f0/0 192.168.10 ...

  7. ARM处理器基础知识

    1.ARM处理器的寄存器,ARM与Thumb状态,7中运行模式 http://blog.chinaunix.net/uid-28458801-id-3494646.html 2.ARM的7种工作模式. ...

  8. phpstorm webstorm编辑器正则替换 类名，方法名替换

    首先勾选Match Case 和 Regex 正则规则:无须添加//左右分解符,直接写正则表达式,注意应该转义的部分,需要原封不动替换的部分加上括号 替换规则:正常书写正则,要继承下来的字符使用$1. ...

  9. css3动画 2D 3D transfrom

    2D transform 例如transform: translate(1px,30px); translate() 方法 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当 ...

  10. HDU4624 Endless Spin 和 HAOI2015 按位或

    Endless Spin 给你一段长度为[1..n]的白色区间,每次随机的取一个子区间将这个区间涂黑,问整个区间被涂黑时需要的期望次数. n<=50 题解 显然是min-max容斥,但是n的范围 ...