使用自定义宽度和高度将 SVG 转换为 PNG/JPEG

Question

我有一个宽度和高度的 SVG 代码。我想下载这个具有自定义宽度和高度的 PNG 和 JPEG 格式的 SVG。 我已经尝试过 HTML canvas 方法来实现这一点，但是当 canvas 绘制图像时，它会裁剪掉 SVG。

这是代码

SVG 代码

<svg id="svgcontent" width="640" height="480" x="640" y="480" overflow="visible" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 480"><!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit--><g class="layer" style="pointer-events:all"><title style="pointer-events:inherit">Layer 1</title><ellipse fill="#FF0000" stroke="#000000" stroke-width="5" cx="280.5" cy="235.5" rx="217" ry="198" id="svg_1"></ellipse></g></svg>

用于将 SVG 转换为 png/jpeg 的 JavaScript 函数

    function save() {
// Converting SVG to String 
    var stringobJ = new XMLSerializer();
      var svg = document.getElementById('svgcontent');
      var svgString = stringobJ .serializeToString(svg );
// IE9 doesn't allow standalone Data URLs
      svg = '<?xml version="1.0"?>\n' + svgString ; 

// Creating an Image Element
      var image = new Image();
      image.src = 'data:image/svg+xml;base64,' + btoa(svg);
      image.width = 300; // This doesn't have any effect
      image.height = 150; // This doesn't have any effect

// Creating Canvas Element 
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      image.onload = function() {
        context.drawImage(image, 0, 0);
        var a = document.createElement('a');
        a.download = "image.png"; //Saving in PNG
        a.href = canvas.toDataURL('image/png'); //Saving in PNG
        a.style = 'display: none;';
        a.click();
      }
    }

它给了我PNG格式的Imgae，但它不是SVG的完整图像，它只是根据画布宽度的图像的一部分bcz画布从图像的右上角绘制图像并继续绘制图像直到画布的宽度和高度.

默认画布宽度为 300，高度为 150

所以如果画布的宽度和高度没有给出它的输出和 300x150 的图像。

我试过canvas.width = anyvalue; canvas.height= anyvalue; 但不影响输出

我想要的是

无论 SVG 的尺寸是多少 当用户给出宽度和高度时，SVG 应该完全适合画布

这是实际的 SVG，下载时需要使用全白背景和图像

这是输出，但我想要具有这些尺寸的完整图像

将宽度和高度作为实际 SVG 赋予画布并不能解决我的问题.....画布的宽度和高度是动态的

jsfiddle link to the problem

Answer 1

我做了一些更改： 你的 svg viewBox="0 0 640 480"。这定义了 SVG 画布的大小。当您绘制图像时（除非您想裁剪它），您希望保持高度成比例，即如果您希望宽度为 300，则高度应为 225。

那么当你创建一个新的canvas元素时，你需要在绘制图像之前声明canvas元素的宽度和高度canvas.width = image.width, canvas.height = image.height,。

function save() {
// Converting SVG to String 
    var stringobJ = new XMLSerializer();
      var svg = document.getElementById('svgcontent');
      var svgString = stringobJ .serializeToString(svg );
// IE9 doesn't allow standalone Data URLs
      svg = '<?xml version="1.0"?>\n' + svgString ; 

// Creating an Image Element
      var image = new Image();
      image.src = 'data:image/svg+xml;base64,' + btoa(svg);
      image.width = 300; 
      image.height = 480*image.width / 640; // keep the height proportional

// Creating Canvas Element 
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      
      image.onload = function() {
        canvas.width = image.width,canvas.height = image.height,
        
        context.drawImage(image, 0, 0);
        var a = document.createElement('a');
        a.download = "image.png"; //Saving in PNG
        a.href = canvas.toDataURL('image/png'); //Saving in PNG
        a.style = 'display: none;';
        a.click();
      }
    }

//save()

<svg id="svgcontent" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink"><!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
<g class="layer" style="pointer-events:all">
<title style="pointer-events:inherit">Layer 1</title>
<ellipse fill="#FF0000" stroke="#000000" stroke-width="5" cx="280.5" cy="235.5" rx="217" ry="198" id="svg_1"></ellipse>
</g>
</svg>