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

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

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

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

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

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

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

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

更改SVG以匹配您的元素

function svg2img(){
    var svg = document.querySelector('svg');
    var xml = new XMLSerializer().serializeToString(svg);
    var svg64 = btoa(xml); //for utf8: btoa(unescape(encodeURIComponent(xml)))
    var b64start = 'data:image/svg+xml;base64,';
    var image64 = b64start + svg64;
    return image64;
};svg2img()

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();

使用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));

最后一行多亏了这个答案

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

const svg=`<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text></svg>` svgToPng(svg,(imgData)=>{ const pngImage = document.createElement('img'); document.body.appendChild(pngImage); pngImage.src=imgData; }); function svgToPng(svg, callback) { const url = getSvgUrl(svg); svgUrlToPng(url, (imgData) => { callback(imgData); URL.revokeObjectURL(url); }); } function getSvgUrl(svg) { return URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' })); } function svgUrlToPng(svgUrl, callback) { const svgImage = document.createElement('img'); // imgPreview.style.position = 'absolute'; // imgPreview.style.top = '-9999px'; document.body.appendChild(svgImage); svgImage.onload = function () { const canvas = document.createElement('canvas'); canvas.width = svgImage.clientWidth; canvas.height = svgImage.clientHeight; const canvasCtx = canvas.getContext('2d'); canvasCtx.drawImage(svgImage, 0, 0); const imgData = canvas.toDataURL('image/png'); callback(imgData); // document.body.removeChild(imgPreview); }; svgImage.src = svgUrl; }