我想要的是

Question

我有一个带有宽度和高度的SVG代码。我想以自定义宽度和高度下载PNG和JPEG格式的SVG。我尝试了HTML画布方法来实现此目的，但是当画布绘制图像时，它将裁剪出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 canvas从图像的右上角绘制图像，然后继续绘制图像直到画布的宽度和高度

默认情况下，画布的宽度为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.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>

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

我想要的是

1 个答案: