从 svg 创建静态 png 不带抗锯齿，带或不带画布

Question

我想要的是

我想获取一个矢量 SVG 图像并从中创建一个没有抗锯齿的光栅 png。svg 将根据用户输入（文本、粗体、字体系列）动态生成。首选 png，但也可以接受其他光栅格式。

我在尝试什么

var svg = '<svg><g><text>Hello World</text></g></svg>';
var img = document.createElement('img');
img.setAttribute('src','data:image/svg+xml;base64,' + btoa(svg_static_data) );
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;
    static_image = canvas.toDataURL('image/png');
};

这里的 svg 非常简单，只是为了演示。在这里，我将 svg 转换为 canvas 元素，并将 canvas 元素转换为图像。当这导致抗锯齿时，我发现可能有帮助的唯一配置是imageSmoothingEnabled，但是我仍然得到抗锯齿，可能是因为该配置适用于用画布本身绘制的元素。我也试过把那个配置放在上面drawImage，但没有运气。

我需要的

将动态非动画 SVG 转换为至少大部分相同的光栅图像的函数，该 SVG 可能包含许多元素和属性，包括弯曲文本。

Answer 1

imageSmoothingEnabled仅适用于图像，但仅当图像源按比例绘制时。

然而，这种情况下的问题是，在处理程序启动之前进行光栅化时，SVG 图像在内部是抗锯齿的，因此当您将其绘制到画布上时，它已经是抗锯齿的 - 您无法执行任何操作来关闭此功能，除了通过手动解析和渲染 SVG（这不是一个小项目）。onload