保存svg为图片

最新推荐文章于 2024-08-07 17:18:27 发布

yule_meng

最新推荐文章于 2024-08-07 17:18:27 发布

阅读量1w

点赞数 7

分类专栏：前端文章标签： svg转图片

本文链接：https://blog.csdn.net/yule_meng/article/details/81947910

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

svg可以转化成画布，然后点击画布右键就有‘保存图片’的选项。
为了方便拿下来用，已将jquery，canvg写成外部引用。

canvg.js

将svg转成canvas需要用到google的一个插件canvg。

<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script  src="https://is.muni.cz/do/rect/el/storage/utils/svgedit/canvg/canvg.js?lang=en"></script> 
<script  src="test.js" type="text/javascript"></script>
</head>
<body>
<textarea id="container" style="min-width:300px;height:100px"></textarea>
<input type="button" value="转图片" onClick="convert()" />
<canvas id="canvasId" ></canvas>
<image id="image"/>
<script type="text/javascript">
function convert(){
    var svgHtml=$("#container").val();
    var canvasId=document.getElementById("canvasId");
    canvg(canvasId,svgHtml);
 }
</script>