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>
</...点击查看剩余70%
{{collectdata}}
网友评论0