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

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

当前回答

使用Canvg库有几种方法将SVG转换为PNG。

在我的例子中，我需要从内联SVG中获取PNG blob。

库文档提供了一个示例(参见OffscreenCanvas示例)。

但是这个方法目前在Firefox中不起作用。是的，你可以在设置中启用gfx. offscreenvas .enabled选项。但是网站上的每个用户都会这么做吗?：）

然而，还有另一种方法也适用于Firefox。

const el = document.getElementById("some-svg"); //this is our inline SVG

var canvas = document.createElement('canvas'); //create a canvas for the SVG render
canvas.width = el.clientWidth; //set canvas sizes
canvas.height = el.clientHeight;

const svg = new XMLSerializer().serializeToString(el); //convert SVG to string

//render SVG inside canvas
const ctx = canvas.getContext('2d');
const v = await Canvg.fromString(ctx, svg);
await v.render();

let canvasBlob = await new Promise(resolve => canvas.toBlob(resolve));

最后一行多亏了这个答案

2021-01-28 08:40:39

其他回答

Svg到png可以根据条件转换:

如果svg的格式是svg(字符串)路径:

创建画布创建新的Path2D()并设置svg为参数在画布上绘制路径创建图像并使用canvas.toDataURL()作为src。

例子:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let svgText = 'M10 10 h 80 v 80 h -80 Z';
let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx.stroke(p);
let url = canvas.toDataURL();
const img = new Image();
img.src = url;

注意，ie中不支持Path2D, edge中部分支持。填充物解决了这个问题: https://github.com/nilzona/path2d-polyfill

使用.drawImage()创建svg blob并在画布上绘制:

制作画布元素从svg xml生成一个svgBlob对象从domUrl.createObjectURL(svgBlob)创建一个url对象; 创建一个Image对象并将url分配给Image src 将图像绘制到画布中从canvas获取png数据字符串:canvas. todataurl ();

漂亮的描述: https://web.archive.org/web/20200125162931/http://ramblings.mcpher.com:80/Home/excelquirks/gassnips/svgtopng

注意，在ie中，你会在canvas.toDataURL()的阶段得到异常;这是因为IE有很高的安全性限制，在那里绘制图像后将canvas视为只读。所有其他浏览器只限制图像是交叉来源。

使用canvg JavaScript库。它是一个单独的库，但有有用的功能。

如:

ctx.drawSvg(rawSvg);
var dataURL = canvas.toDataURL();

2019-10-25 17:56:57

使用Canvg库有几种方法将SVG转换为PNG。

在我的例子中，我需要从内联SVG中获取PNG blob。

库文档提供了一个示例(参见OffscreenCanvas示例)。

但是这个方法目前在Firefox中不起作用。是的，你可以在设置中启用gfx. offscreenvas .enabled选项。但是网站上的每个用户都会这么做吗?：）

然而，还有另一种方法也适用于Firefox。

const el = document.getElementById("some-svg"); //this is our inline SVG

var canvas = document.createElement('canvas'); //create a canvas for the SVG render
canvas.width = el.clientWidth; //set canvas sizes
canvas.height = el.clientHeight;

const svg = new XMLSerializer().serializeToString(el); //convert SVG to string

//render SVG inside canvas
const ctx = canvas.getContext('2d');
const v = await Canvg.fromString(ctx, svg);
await v.render();

let canvasBlob = await new Promise(resolve => canvas.toBlob(resolve));

最后一行多亏了这个答案

2021-01-28 08:40:39

解决方案转换SVG到blob URL和blob URL到png图像

2019-09-28 00:18:33

我的用例是从网络加载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

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

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

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

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

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

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

2019-06-19 12:48:55

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

推荐文章

最新文章

标签