Including fonts when converting SVG to PNG

前端 未结 2 1729
死守一世寂寞
死守一世寂寞 2021-01-15 21:39

I am trying to generate some SVG and allow users of my website to download these SVGs as PNGs.
After reading this I get all my external images included in the downloaded

相关标签:
2条回答
  • 2021-01-15 22:00

    A working proof of concept project on GitHub to address OP problem statement.

    https://github.com/nirus/SVG-PNG-Convert

    Built generic Javascript module that can be modified and used anywhere. Read the documentation. Give it a try!

    0 讨论(0)
  • 2021-01-15 22:15

    I'm able to include the font in the png itself with the following code, give it a try

    var svg = document.getElementById('generated-svg');
    var svgData = new XMLSerializer().serializeToString( svg );
    
    var canvas = document.createElement("canvas");
    canvas.width = 300;
    canvas.height = 500;
    var ctx = canvas.getContext("2d");
    
    //display image
    var img = document.createElement( "img" );
    img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );
    
    
    img.onload = function() {
    ctx.drawImage( img, 0, 0 );
    
    //image link
    console.log( canvas.toDataURL( "image/png" ) );
    
    
    //open image 
    window.location.href=canvas.toDataURL( "image/png" );
    };
    

    https://jsfiddle.net/user3839189/hutvL4ks/1/

    0 讨论(0)
提交回复
热议问题