SVG to Image in js

最新推荐文章于 2020-12-22 10:49:32 发布

weixin_30367169

最新推荐文章于 2020-12-22 10:49:32 发布

阅读量403

点赞数

原文链接：http://www.cnblogs.com/xgqfrms/p/10516810.html

版权

SVG to Image in js

SVG to Image

https://image.online-convert.com/convert-to-svg

https://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser

https://stackoverflow.com/questions/27230293/how-to-convert-svg-to-png-using-html5-canvas-javascript-jquery-and-save-on-serve

function drawInlineSVG(ctx, rawSVG, callback) {

    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
        domURL = self.URL || self.webkitURL || self,
        url = domURL.createObjectURL(svg),
        img = new Image;

    img.onload = function () {
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    };

    img.src = url;
}

// usage:
drawInlineSVG(ctxt, svgText, function() {
    console.log(canvas.toDataURL());  // -> PNG data-uri
});


function drawInlineSVG(svgElement, ctx, callback){
  var svgURL = new XMLSerializer().serializeToString(svgElement);
  var img  = new Image();
  img.onload = function(){
    ctx.drawImage(this, 0,0);
    callback();
    }
  img.src = 'data:image/svg+xml; charset=utf8, '+encodeURIComponent(svgURL);
  }

//usage :
drawInlineSVG(document.querySelector('svg'), ctxt, function(){console.log(canvas.toDataURL())})

https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer

demo

https://www.sitepoint.com/community/t/how-to-convert-a-svg-file-to-to-a-svg-tag-using-readysetraphael-com-tool/43304/2

https://codepen.io/chriscoyier/pen/lCEux
https://codepen.io/webgeeker/pen/oVGybN

https://css-tricks.com/using-svg/

Canvas to Image

https://github.com/canvg/canvg

https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf/3514404#3514404


let canvas = document.getElementById("myCanvas");

let img  = canvas.toDataURL("image/png");

document.write(`<img src="${img}"/>`);

// document.write('<img src="'+img+'"/>');

svg bug & only for canvas

solutions

svg to canvas to image

https://codepen.io/webgeeker/full/VRMGyN

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="xgqfrms">
    <meta name="generator" content="VS code">
    <title>svg to canvas to image</title>
    <style>
        .auto-hidden{
            display: none;
            /* visibility: hidden; */
        }
    </style>
</head>
<body>
    <section>
        <svg width="500" height="100">
            <rect x="0" y="64" width="25" height="36" fill="navy"></rect><rect x="30" y="7" width="25" height="93" fill="navy"></rect><rect x="60" y="34" width="25" height="66" fill="navy"></rect><rect x="90" y="49" width="25" height="51" fill="navy"></rect><rect x="120" y="25" width="25" height="75" fill="navy"></rect><rect x="150" y="46" width="25" height="54" fill="navy"></rect><rect x="180" y="13" width="25" height="87" fill="navy"></rect><rect x="210" y="58" width="25" height="42" fill="navy"></rect><rect x="240" y="73" width="25" height="27" fill="navy"></rect><text x="0" y="61" width="25" height="36" class="high-light-color">¥12</text><text x="30" y="4" width="25" height="93" class="high-light-color">¥31</text><text x="60" y="31" width="25" height="66" class="high-light-color">¥22</text><text x="90" y="46" width="25" height="51" class="high-light-color">¥17</text><text x="120" y="22" width="25" height="75" class="high-light-color">¥25</text><text x="150" y="43" width="25" height="54" class="high-light-color">¥18</text><text x="180" y="10" width="25" height="87" class="high-light-color">¥29</text><text x="210" y="55" width="25" height="42" class="high-light-color">¥14</text><text x="240" y="70" width="25" height="27" class="high-light-color">¥9</text>
        </svg>
        <canvas id="canvas"></canvas>
    </section>
    <!-- js -->
    
</body>
</html>

转载于:https://www.cnblogs.com/xgqfrms/p/10516810.html

weixin_30367169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG to Image in js

SVG to Image in jsSVG to Imagehttps://image.online-convert.com/convert-to-svghttps://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browserhttps://stackoverflo...
复制链接

扫一扫