在浏览器中将SVG转换为图像(JPEG、PNG等)

我想通过JavaScript将SVG转换为位图图像(如JPEG, PNG等)。

当前回答

我的用例是从网络加载svg数据，这个ES6类做了这项工作。

class SvgToPngConverter {
  constructor() {
    this._init = this._init.bind(this);
    this._cleanUp = this._cleanUp.bind(this);
    this.convertFromInput = this.convertFromInput.bind(this);
  }

  _init() {
    this.canvas = document.createElement("canvas");
    this.imgPreview = document.createElement("img");
    this.imgPreview.style = "position: absolute; top: -9999px";

    document.body.appendChild(this.imgPreview);
    this.canvasCtx = this.canvas.getContext("2d");
  }

  _cleanUp() {
    document.body.removeChild(this.imgPreview);
  }

  convertFromInput(input, callback) {
    this._init();
    let _this = this;
    this.imgPreview.onload = function() {
      const img = new Image();
      _this.canvas.width = _this.imgPreview.clientWidth;
      _this.canvas.height = _this.imgPreview.clientHeight;
      img.crossOrigin = "anonymous";
      img.src = _this.imgPreview.src;
      img.onload = function() {
        _this.canvasCtx.drawImage(img, 0, 0);
        let imgData = _this.canvas.toDataURL("image/png");
        if(typeof callback == "function"){
            callback(imgData)
        }
        _this._cleanUp();
      };
    };

    this.imgPreview.src = input;
  }
}

下面是你如何使用它

let input = "https://restcountries.eu/data/afg.svg"
new SvgToPngConverter().convertFromInput(input, function(imgData){
    // You now have your png data in base64 (imgData). 
    // Do what ever you wish with it here.
});

如果你想要一个普通的JavaScript版本，你可以访问Babel网站并在那里编译代码。

2019-07-22 22:02:42

其他回答

Jbeard4解决方案工作得很好。

我使用Raphael SketchPad创建SVG。链接到步骤1中的文件。

对于保存按钮(svg的id是"editor"， canvas的id是"canvas"):

$("#editor_save").click(function() {

// the canvg call that takes the svg xml and converts it to a canvas
canvg('canvas', $("#editor").html());

// the canvas calls to output a png
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");
// do what you want with the base64, write to screen, post to server, etc...
});

2012-06-27 14:27:55

下面是你如何通过JavaScript来做到这一点:

使用Canvas JavaScript库渲染SVG图像:https://github.com/gabelerner/canvg 根据以下说明，从画布中捕获编码为JPG(或PNG)的数据URI:

2010-10-20 08:35:10

下面是一个函数，它在没有库的情况下工作，并返回一个Promise:

/**
 * converts a base64 encoded data url SVG image to a PNG image
 * @param originalBase64 data url of svg image
 * @param width target width in pixel of PNG image
 * @return {Promise<String>} resolves to png data url of the image
 */
function base64SvgToBase64Png (originalBase64, width) {
    return new Promise(resolve => {
        let img = document.createElement('img');
        img.onload = function () {
            document.body.appendChild(img);
            let canvas = document.createElement("canvas");
            let ratio = (img.clientWidth / img.clientHeight) || 1;
            document.body.removeChild(img);
            canvas.width = width;
            canvas.height = width / ratio;
            let ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            try {
                let data = canvas.toDataURL('image/png');
                resolve(data);
            } catch (e) {
                resolve(null);
            }
        };
        img.onerror = function() {
            resolve(null);
        };
        img.src = originalBase64;
    });
}

在Firefox上，svg没有设置宽度/高度是有问题的。

请参阅此工作示例，其中包括Firefox问题的修复。

2020-11-12 08:46:47

这是我的2美分。不知怎的，下载锚标签在代码片段中不像预期的那样工作，但在Chrome中工作得很好。

这里正在使用jsFiddle

2022-07-21 05:41:52

我最近发现了几个用于JavaScript的图像跟踪库，它们确实能够构建一个可接受的位图近似值，包括大小和质量。我正在开发这个JavaScript库和CLI:

https://www.npmjs.com/package/svg-png-converter

它为所有这些提供了统一的API，支持浏览器和节点，不依赖于DOM，以及命令行工具。

对于转换标志/卡通/喜欢的图像，它做得很好。对于照片/现实主义，需要一些调整，因为输出大小可以增长很多。

它有一个游乐场，虽然现在我正在做一个更好的，更容易使用，因为添加了更多的功能:

https://cancerberosgx.github.io/demos/svg-png-converter/playground/#