Question

Gist Github

<button style="width:100px;height:50px" onclick="preView()">
  click here to convert
</button>
<svg id="drawarea" style="display:none" onxmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:xlink="http://www.w3.org/1999/xlink" height="241" width="321" viewBox="0 0 321 241" color-interpolation-filters="sRGB" onfocus="test('mmmmmm')" onmousemove="xandyCoor('mmmmmm',event)" onmouseout="clearCoor('mmmmmm')" ondragover="allowDrop(event)" ondrop="dropEle(event,'mmmmmm')" xmlns="http://www.w3.org/2000/svg" xmlns:svgjs="http://svgjs.com/svgjs"><defs id="SvgjsDefs1006"><linearGradient id="SvgjsLinearGradient1024" x1="0" y1="0" x2="0" y2="1"><stop id="SvgjsStop1025" stop-color="#000000" offset="0.5"></stop><stop id="SvgjsStop1026" stop-color="#ffff00" offset="0.5"></stop></linearGradient></defs><rect id="SvgjsRect1007" width="320" height="240" x="0" y="0" fill="#ffffff"></rect><g id="SvgjsG1008" viewname="mmmmmm" viewdescription="" viewcondition=""><g id="SvgjsG1009" type="text" viewname="mmmmmm"><g id="SvgjsG1019" font="FIXED_8" dynamic="false" source="null" bgcolor="#ffffff" type="text" transform="matrix(1,0,0,1,40,36)"><rect id="SvgjsRect1021" width="81.765625" height="11" x="0" y="-9" fill="#ffffff"></rect><text id="SvgjsText1020" font-family="Verdana" fill="#f44245" onclick="textProperties(this.id,event)" font-size="9" font-weight="2" family="Verdana" size="9" weight="2">Click to enter text</text></g></g><g id="SvgjsG1010" type="number" viewname="mmmmmm"><g id="SvgjsG1016" transform="matrix(1,0,0,1,160,120)" source="null" format="null" font="FIXED_8" bgcolor="#ffffff" type="number"><rect id="SvgjsRect1018" width="99.65625" height="11" x="0" y="-9" fill="#ffffff"></rect><text id="SvgjsText1017" font-family="Verdana" fill="#62f441" font-size="9" font-weight="2" family="Verdana" size="9" weight="2" onclick="numberProperties(this.id,event)">Click to enter number</text></g></g><g id="SvgjsG1011" type="image" viewname="mmmmmm"></g><g id="SvgjsG1012" type="bargraph" viewname="mmmmmm"><g id="SvgjsG1023" transform="matrix(1,0,0,1,90,115)" onclick="changeBargarphProperties(this.id,event)" source="null" flag="0" fill="url(#SvgjsLinearGradient1024)" type="bargraph">      <rect id="bargrapghrect" x="0" y="0" width="20" height="80" stroke="#FB0303" stroke-width="2"></rect>
      </g></g><g id="SvgjsG1013" type="gauge" viewname="mmmmmm"><g id="SvgjsG1022" transform="matrix(1,0,0,1,136,136)" onclick="changeGaugeProperties(this.id,event)" source="null" flag="null" type="gauge">    <circle id="gauge" cx="25" cy="25" r="20" stroke="#000000" stroke-width="2" fill="#ffffff"></circle>
    <circle id="needle" cx="25" cy="25" r="3" stroke="#000000" stroke-width=".5" fill="#000000"></circle>
    <path id="needlearrow" d="M16 16 L27 24 L24 27 L16 16" stroke="#000000" stroke-width="0.5" fill="#000000"></path>
    <text id="min" fill="#000000" font-size="5" font-family="Verdana" x="8" y="28" style="display:none;"></text>
    <text id="max" fill="#000000" font-size="5" font-family="Verdana" x="31" y="28" style="display:none;"></text>
    </g></g><g id="SvgjsG1014" type="icon" viewname="mmmmmm"></g><g id="SvgjsG1015" type="range" viewname="mmmmmm"></g></g></svg>



<script>
function preView(name){

 var svg = document.querySelector( "svg" );
 var svgData = new XMLSerializer().serializeToString( svg );

 var canvas = document.createElement( "canvas" );
 var ctx = canvas.getContext( "2d" );

 var img = document.createElement( "img" );
 console.log(img)
 img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );
 img.onload =go()
 function go(){
     ctx.drawImage( img, 0, 0 );
     var canvasdata = canvas.toDataURL("image/png", 1);

     // Now is done
     console.log( canvas.toDataURL( "image/png" ) );
     var a = document.createElement("a");
     a.download = "download_img" + ".png";
     a.href = canvasdata;
     document.body.appendChild(a);
     a.click();
 };
}
 </script>

这是一个用于将svg转换为png / jpg的函数。虽然图像正在下载，但我打开时它们是空白的。

Answer 1

切换2行的顺序，如下所示：

img.onload = go();    
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );

您需要先定义onload处理程序，然后定义src属性。

SVG到png转换器功能不起作用

1 个答案: