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. MFC中动态添加控件----寻找多年的秘籍,吐血推荐

    原文作者tianwaik 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立 ...

  2. jackson 学习资料

    源代码托管地址 https://github.com/FasterXML/jackson https://github.com/FasterXML/jackson-docs http://www.st ...

  3. 从一道题看js的拆箱操作

    前段时间看到一道题,如下:([][[]]+[])[+![]]+([]+{})[!+[]+![]]问最终打印结果,然后简单了解一下js的装箱,拆箱操作. 基本 装箱操作: 就是将基本类型(String, ...

  4. Eclipse apk项目创建和项目构架

    一.创建项目工程 设定名字 设定包名(每一台机器只有唯一的包名)下一步 根据设置进行选择 创建空项目 Finish即可创建 调节项目的字体 二.Eclipse 项目构架 Src 2. Gen R.ja ...

  5. k8s网络配置管理

    docker容器的四种网络类型 1.桥接           2.联盟    3.主机    4.无 docker跨节点的容器通信必须通过NAT机制  宿主机上的容器一般都是私网地址 它可以通过宿主机 ...

  6. Django2.2 pymysql 连接mysql数据库的坑

    参考链接 https://www.52pojie.cn/thread-921141-1-1.html 1. mysqlclient 1.3版本不对 解决办法:注释掉D:\Users\xxx\AppDa ...

  7. Mac 提示错误”xcrun: error“

    错误现象: Mac 安装python模块时出现异常错误 xcrun: error: invalid active developer path (/Library/Developer/CommandL ...

  8. 为什么要将action实例设置为多例

    转载自 https://zhidao.baidu.com/question/622162406833405932.html struts2中action是多例的,即一个session产生一个actio ...

  9. 分析一个UBOOT的方法

    1. 编译完成后可以看到在主目录下生成了uboot.bin文件,为了方便分析,使用如下命令将其反汇编:arm-linux-objdump -D -m arm u-boot > u-boot.as ...

  10. 逆向破解之160个CrackMe —— 021

    CrackMe —— 021 160 CrackMe 是比较适合新手学习逆向破解的CrackMe的一个集合一共160个待逆向破解的程序 CrackMe:它们都是一些公开给别人尝试破解的小程序,制作 c ...