Javascript 如何在将svg转换为图像后调整输出图像的大小？

我想将此图像另存为png，但单击按钮后，图像会自动调整大小

这是我点击按钮后的输出图像。

HTML和SVG

    <button>svg to png</button>
    <select class="color" id="color">  
                  <option value="" >Select Color</option>
                  <option value="black" >Black</option> 
                  <option value="red" >Red</option> 
                  <option value="blue" >Blue</option>
          </select> 
    <svg id="svg" class="teeth" 
     width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
        <!-- upper right 8 -->
        <g id="molar-group" class="molar">
            <rect x="75" y="75" stroke="black" id="disto-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
            <rect x="200" y="75" stroke="black" id="mesio-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>

            <polygon stroke="black" id="disto-buccal" style="stroke-width: 5px;" points="0 0 200 0 200 75 75 75" fill="white" />
            <polygon stroke="black" id="mesio-buccal" style="stroke-width: 5px;" points="200 0 400 0 325 75 200 75" fill="white" />

            <polygon stroke="black" id="mesial" style="stroke-width: 5px;" points="400 0 400 300 325 225 325 75" fill="white" />

            <polygon stroke="black" id="mesio-palatal" style="stroke-width: 5px;" points="400 300 200 300 200 225 325 225" fill="white" />
            <polygon stroke="black" id="disto-palatal" style="stroke-width: 5px;" points="200 300 0 300 75 225 200 225" fill="white" />

            <polygon stroke="black" id="distal" style="stroke-width: 5px;" points="0 300 0 0 75 75 75 225" fill="white" />
        </g>
    </svg>
<canvas id="canvas" name="canvas"></canvas>

---

如何调整输出图像的大小，如图1。如何在单击按钮后捕获整个图像1。因为在我的输出图像中只捕获了1/4。

您的输出图像是主源的1/4，因为您的画布大小与源svg大小不匹配

---

您可以设置画布宽度和高度以将整个svg转换为png

var canvas = document.getElementById('canvas');
canvas.height = 300;
canvas.width = 400;

var btn=document.querySelector（'button'）；
var svg=document.getElementById（'svg'）；
var canvas=document.querySelector（'canvas'）；
函数触发器下载（imgURI）{
var evt=新建MouseEvent（'单击'{
视图：窗口，
泡泡：错，
可取消：正确
});
var a=document.createElement（'a'）；
a、 setAttribute（'download'，'image.png'）；
a、 setAttribute（'href'，imgURI）；
a、 setAttribute（'target'，'u blank'）；
a、 调度事件（evt）；
}
btn.addEventListener（'click'，函数（）{
var canvas=document.getElementById（'canvas'）；
帆布高度=300；
画布宽度=400；
var ctx=canvas.getContext（'2d'）；
var data=（新的XMLSerializer（））.serializeToString（svg）；
var DOMURL=window.URL | | window.webkitURL | | window；
var img=新图像（）；
var svgBlob=newblob（[data]，{type:'image/svg+xml；charset=utf-8'}）；
var url=DOMURL.createObjectURL（svgBlob）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
var imgURI=画布
.toDataURL（'image/png'）
.replace（'image/png'、'image/octet stream'）；
触发器下载（imgURI）；
};
img.src=url；
});
svg到png
选择颜色
黑色
红色
蓝色
您的输出图像是主源的1/4，因为您的画布大小与源svg大小不匹配

您可以设置画布宽度和高度以将整个svg转换为png

var canvas = document.getElementById('canvas');
canvas.height = 300;
canvas.width = 400;


var btn=document.querySelector（'button'）；
var svg=document.getElementById（'svg'）；
var canvas=document.querySelector（'canvas'）；
函数触发器下载（imgURI）{
var evt=新建MouseEvent（'单击'{
视图：窗口，
泡泡：错，
可取消：正确
});
var a=document.createElement（'a'）；
a、 setAttribute（'download'，'image.png'）；
a、 setAttribute（'href'，imgURI）；
a、 setAttribute（'target'，'u blank'）；
a、 调度事件（evt）；
}
btn.addEventListener（'click'，函数（）{
var canvas=document.getElementById（'canvas'）；
帆布高度=300；
画布宽度=400；
var ctx=canvas.getContext（'2d'）；
var data=（新的XMLSerializer（））.serializeToString（svg）；
var DOMURL=window.URL | | window.webkitURL | | window；
var img=新图像（）；
var svgBlob=newblob（[data]，{type:'image/svg+xml；charset=utf-8'}）；
var url=DOMURL.createObjectURL（svgBlob）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
var imgURI=画布
.toDataURL（'image/png'）
.replace（'image/png'、'image/octet stream'）；
触发器下载（imgURI）；
};
img.src=url；
});
svg到png
选择颜色
黑色
红色
蓝色
设置画布宽度和高度设置画布宽度和高度