1. 程式人生 > 實用技巧 >svg圖片轉png下載

svg圖片轉png下載

<script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>

<div class="svg-wrap">

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="圖層_1" x="0" y="0" viewBox="0 0 185.4 47" xml:space="preserve"><style>.st1{fill:#5e5e5e}</style><path d="M50.4 20c-1.8 3-4.8 5.3-8.5 6.3-.1 0-.2.1-.3.1-.6.2-1.1.3-1.7.3-2.5 0-3.9-1.7-3.2-3.8.6-1.5 2-2.8 3.8-3.4 2.8-1 4.7-3.3 4.7-6 0-3.6-3.5-6.5-7.8-6.5s-7.8 2.9-7.8 6.5v20c0 4.8-2.8 9-7 11.4-2.3 1.3-5 2.1-7.8 2.1C6.6 47 0 40.9 0 33.5c0-2.4.7-4.6 1.9-6.5 1.8-3 4.9-5.3 8.5-6.3.6-.2 1.3-.3 1.9-.3 2.5 0 3.9 1.7 3.2 3.8-.5 1.4-1.9 2.6-3.5 3.3-.2.1-.4.1-.6.2-2.7 1-4.4 3.2-4.4 5.8 0 3.6 3.5 6.5 7.8 6.5s7.8-2.9 7.8-6.5v-20c0-4.8 2.8-9 7-11.4C31.9.8 34.6 0 37.4 0c8.2 0 14.8 6.1 14.8 13.5 0 2.4-.7 4.6-1.8 6.5z" fill="#6467ef"/><path class="st1" d="M172.2 9.9c-.7-1.4-1.6-3.3-2.1-4.3l-2.9.9 1.7 3.3h-14.5v12.4c0 8.4-.6 12.2-4 17.7l2.6 1.4c3.5-6 4.3-9.7 4.3-19.3v-9.4h28.1V9.9h-13.2z"/><path class="st1" d="M173.8 25.1l-.5-.3c2.6-1.6 8-5.1 9.5-6.1V16h-22.6v2.6h18.1c-1.5 1-5.1 3.3-7.3 4.6-2.1-1.4-4.4-3-5.9-3.9l-1.8 1.9c1.6 1.1 4.4 2.9 6.7 4.4h-11.7v2.7h11.9V36c0 2.1-.5 2.4-3 2.4h-4.5l.5 2.7h4.5c3.9 0 5.3-.9 5.3-4.5v-8.3h8.6l-3.4 5.5 2.6 1.1 3.8-6.7v-2.6H173l.8-.5zM142.2 8.4h-17.5v10.4h17.5V8.4zm-2.9 8h-11.9V11h11.9v5.4zM123.8 28.6c-1.2-1.5-3.7-4.3-4.7-5.4l-1.1 1V20h5v-2.8h-5v-5.8c1.9-.4 3.8-.8 5.3-1.2l-.6-2.7c-3.5 1-9.1 2-12.6 2.5l.3 2.7c1.4-.2 3.2-.5 5-.8v5.3H110V20h5.2c-1.2 3.9-3.3 8.3-5.9 12l1.7 2.4c1.7-2.5 3.2-5.5 4.4-8.5v15.5h2.6V25.6c1.2 1.4 2.9 3.5 3.8 4.7l2-1.7z"/><path class="st1" d="M134.8 32.2h8v-2.6h-8v-4.5h9v-2.6h-20.4v2.6h8.6v4.5h-8v2.6h8v4.4h-10.7v2.8H145v-2.8h-10.2z"/><g><path class="st1" d="M92.4 14.5c2.4 5.1 6.9 15.1 8.9 20.3l3.1-1.3c-2-4.8-6.9-15.5-9.2-20.2l-2.8 1.2zM75.6 13.5c-1.3 5.9-4.4 14-7.5 19.6l2.8 1.4c3.1-5.8 6.1-13.7 7.7-20.3l-3-.7zM84.9 34c0 2.6-.4 3.2-3.2 3.2h-4.9l.7 3.1h5c4.4 0 5.6-1.2 5.6-5.4V6.8H85L84.9 34z"/></g></svg>

</div>


<script type="text/javascript">
    var svgXml = $('.svg-wrap').html();
 
    var image = new Image();
    image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //給圖片物件寫入base64編碼的svg流
     
    var canvas = document.createElement('canvas');  //準備空畫布
    canvas.width = $('.svg-wrap svg').width();
    canvas.height = $('.svg-wrap svg').height();
     
    var context = canvas.getContext('2d');  //取得畫布的2d繪圖上下文
    context.drawImage(image, 0, 0);
     
    var a = document.createElement('a');
    a.href = canvas.toDataURL('image/png');  //將畫布內的資訊匯出為png圖片資料
    a.download = "MapByMathArtSys";  //設定下載名稱
    a.click(); //點選觸發下載
    console.log(a);
</script>