js svg转图片格式
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转图片格式的更多相关文章
- SVG小图片格式显示（字符图标，可设置title属性）
1.HTML + Font 方式: 修改图标颜色只需修改字体颜色,修改图片大小只需修改字体大小. 关于字体图片,我们可以自己制作,也可以从网上下载 阿里巴巴矢量图库. 在线图标字体库.Icomoon. ...
- JS验证图片格式和大小并预览
用于上传图片的js验证: <%@ page language="java" contentType="text/html; charset=UTF-8"p ...
- 转: jquery.qrcode.js生成二维码插件&转成图片格式
原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...
- 前端工程师技能之photoshop巧用系列第四篇——图片格式
× 目录 [1]图片格式 [2]保存设置 前面的话 对于前端来说,图片格式是需要重要掌握的知识.本文是photoshop巧用系列第四篇——图片格式 图片格式 目前在前端的开发中常用的图片格式有jpg. ...
- 图片格式转换之ImageMagick
项目中需要实现一些图片文件到TIFF文件的转换,去网上下载了一些第三方软件. 好的软件需要收费,免费的存在各种问题. 自己动手,丰衣足食! 众里寻他千百度,蓦然回首,那人就是ImageMagick. ...
- 关于web上的图片格式问题，新的彩蛋
我们耳熟能详的几种格式无外乎 png-8,png-24,jpeg,gif,svg. 但是上面的那些都不是能够另人惊喜的答案.关于新技术的是Webp,Apng.(是否有关注新技术,新鲜事物) 1)Web ...
- js实现网页图片延时加载的原理和代码 提高网站打开速度
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- java通过SVG导出图片
import java.io.ByteArrayInputStream; import java.io.File; import java.io.FileOutputStream; import ja ...
- 【原创】区分png图片格式和apng图片格式的解决办法
最近公司有个项目,要抓取客户微信公众号的文章,以及文章内容中的图片,并且在图片加上客户自己的水印.我们使用阿里云OSS存储图片和加水印,发现真心好用,提升了我们的开发效率,阿里云现在是越来越强大了.. ...
随机推荐
- 创建你自己定制的vuejs plugin扩展app的功能
什么是vuejs plugin插件 vuejs plugin插件是一个向你的app注入新的全局功能的强大但又简约的方式.从概念上来说,vue plugin非常简单,它就是一个包含了install方法的 ...
- 灰度共生矩阵（Gray-level Co-occurrence Matrix，GLCM），矩阵的特征量
又叫做灰度共现矩阵 Prerequisites 概念 计算方式 对于精度要求高且纹理细密的纹理分布,我们取像素间距为d=1d=1,以下是方向的说明: 我们来看,matlab内置工具箱中的灰度共生矩阵的 ...
- Spring Security 解析(七) —— Spring Security Oauth2 源码解析
Spring Security 解析(七) -- Spring Security Oauth2 源码解析 在学习Spring Cloud 时,遇到了授权服务oauth 相关内容时,总是一知半解,因 ...
- 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...
- 单词demantoite翠榴石demantoite英语
一般认为翠榴石demantoite的形成条件是: (1)围岩组成应该是贫铝富铁,且附近有钙质碳酸盐出露地区,即有利于“纯度高”的钙铁榴石结晶环境.否则,若钙铝榴石端员分子比增多,2价Fe必将直接影响晶 ...
- centos7配置jdk8环境变量
最近在Linux的环境下配置jdk,参照网上的一些教程出现了一些问题,原因大致是由于centos的系统版本不同或者是jdk的版本不同导致出现了一定的问题.包括常规的因为classpath配置不对出现的 ...
- 【功能点】php导出excel
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_33862644/article/d ...
- 关于子类和父类中的this的用法
public class Demo { public static void main(String[] args) { Fu f = new Zi(); f.show(); } } class Fu ...
- 词向量---LSA(Latent Semantic Analysis)
举例: 矩阵分解之后,取前两维,k=2, 单词距离: 文档距离: 通过LSA分析之后计算文档间的余弦相似度,属于同一个类型文本之间的相似度很接近:在原始文档间计算相似度,效果不如LSA 当出现新的 ...
- Beta冲刺(6/7)——2019.5.27
所属课程 软件工程1916|W(福州大学) 作业要求 Beta冲刺(6/7)--2019.5.27 团队名称 待就业六人组 1.团队信息 团队名称:待就业六人组 团队描述:同舟共济扬帆起,乘风破浪万里 ...