js实现svg转图片及图片转svg的几种方式
SVG格式是目前最最火的一种图片文件格式，它的英文是Scalable Vector Graphics，翻译过来是可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。他也是随着h5的兴起而推广开来，解决了传统位图的问题，那么在js中如何实现图片转svg及svg转图片呢，今天来给大家介绍几种方式。
如果单说npm端插件，有很多，其中svg-png-converter这款就可以直接进行图片与svg之间的互转，svg-png-converter具体的用法可参照官方文档https://www.npmjs.com/package/svg-png-converter
今天我们主要说说在浏览器上直接能够进行图片与svg的相互转换
一、svg转图片方法
1、svg转图片其实不难，最简单的方式就html2cavcas，直接将svg元素转成canvas输出成图片，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>svg转图片</title>
<script id="bfwone" data="dep=jquery.17&err=1" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script>
bready(function() {
$("#convertbtn").click(function(){
use(["html2canvas.min"], function() {
html2canvas(document.querySelector("#view")).then(canvas => {
document.body.appendChild(canvas)
});
});
});
});
</script>
</head>
<body>
这是svg文件
<div id="view">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)" />
</svg>
</div>
<input type="button" value="转换png" id="convertbtn">
</body>
</html>2、svgAsPngUri.js 插件来实现<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS中svg转图片的方法</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/svgAsPngUri.js"></script>
<script type="text/javascript">
$(function() {
var canvas = $("#svg-wrap svg")[0];
svgAsPngUri(canvas, null, function(uri) {
$("#svg-wrap").append('以下是转换的图片<img src="' + uri + '" alt="转换失败"/>');
});
});
</script>
<style>
</style>
</head>
<body>
<div id="svg-wrap">
这是svg
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)" />
</svg>
</div>
</body>
</html>项目在线webide地址：http://editor.bfw.wiki/Editor/Open.html?projectid=15766334193998490087二、图片转svg方法
imagetracer.js，这是一款在浏览器和npm都能运行的转换插件，先看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS中图片转svg的方法</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/imagetracer.js"></script>
<script type="text/javascript">
$(function() {
ImageTracer.imageToSVG(
'images/test.png',
function(svgstr) {
$("#svgtxt").val(svgstr);
ImageTracer.appendSVGString(svgstr, 'svgcontainer');
},
'posterized2'
);
});
</script>
<style>
</style>
</head>
<body>
以下是转换后的svg图片
<div id="svgcontainer">
</div>
以下是转换后的svg代码
<textarea id="svgtxt" style="width:100%;height:300px;"></textarea>
</body>
</html>项目在线webide地址：http://editor.bfw.wiki/Editor/Open.html?projectid=15766334193998490087&file=imgtosvg.htmlok，今天就说到这，有什么问题可以留言给我
{{collectdata}}
网友评论0