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

Question

此图像我想另存为 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>

Javascript:

var btn = document.querySelector('button');
var svg = document.getElementById('svg');
var canvas = document.querySelector('canvas');

function triggerDownload (imgURI) {
  var evt = new MouseEvent('click', {
    view: window,
    bubbles: false,
    cancelable: true
  });

  var a = document.createElement('a');
  a.setAttribute('download', 'image.png');
  a.setAttribute('href', imgURI);
  a.setAttribute('target', '_blank');

  a.dispatchEvent(evt);
}

btn.addEventListener('click', function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var data = (new XMLSerializer()).serializeToString(svg);
  var DOMURL = window.URL || window.webkitURL || window;

  var img = new Image();
  var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
  var url = DOMURL.createObjectURL(svgBlob);

  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);

    var imgURI = canvas
        .toDataURL('image/png')
        .replace('image/png', 'image/octet-stream');

    triggerDownload(imgURI);
  };

  img.src = url;
});

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

Answer 1

您的输出图像是主源图像的 1/4，因为您的 Canvas 尺寸与源 svg 尺寸不匹配。

您可以设置 Canvas 宽度和高度以将整个 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');

function triggerDownload (imgURI) {
  var evt = new MouseEvent('click', {
    view: window,
    bubbles: false,
    cancelable: true
  });

  var a = document.createElement('a');
  a.setAttribute('download', 'image.png');
  a.setAttribute('href', imgURI);
  a.setAttribute('target', '_blank');

  a.dispatchEvent(evt);
}

btn.addEventListener('click', function () {
  var canvas = document.getElementById('canvas');
  canvas.height = 300;
  canvas.width = 400;
  var ctx = canvas.getContext('2d');
  var data = (new XMLSerializer()).serializeToString(svg);
  var DOMURL = window.URL || window.webkitURL || window;

  var img = new Image();
  var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
  var url = DOMURL.createObjectURL(svgBlob);

  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);

    var imgURI = canvas
        .toDataURL('image/png')
        .replace('image/png', 'image/octet-stream');

    triggerDownload(imgURI);
  };

  img.src = url;
});

<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>