保存svg爲圖片

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>

使用方法:

  1. 新建文本文檔,貼入代碼後綴名改爲.html,打開方式選瀏覽器。
  2. 將需要轉的以下格式的內容複製粘貼到頁面的輸入框中,點擊“轉圖片”按鈕。
<svg>...</svg>

出現圖片後選擇圖片,右鍵即可保存成圖片。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章