使用自定義寬度和高度將SVG轉換為PNG / JPEG

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; canvas.width = anyvalue; canvas.height= anyvalue; 但不會影響輸出

我想要的是

當用戶指定寬度和高度時，無論SVG的尺寸是多少，SVG都應完全適合畫布

這是實際的SVG，實際需要下載所有白色背景和圖像

這是輸出，但是我想要這些尺寸的完整圖像

將畫布的寬度和高度作為實際的SVG不能解決我的問題.....畫布的寬度和高度是動態的

jsfiddle鏈接到問題

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>