Question

我想要什么

我想拍摄一个矢量SVG图像，并从中创建一个没有消除锯齿的光栅png。 svg将根据用户输入（text，bold，font-family）动态生成。 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

[ 1 0 0] [(1-m^2)/(1+m^2) 2m/(1+m^2) 0] [ 1 0 0] [x] [ 0 1 b] [ 2m/(1+m^2) (m^2-1)/(1+m^2) 0] [ 0 1 -b] [y] [ 0 0 1] [ 0 0 1] [ 0 0 1] [1]仅适用于图像，但仅限于缩放图像源时。

但是，在这种情况下的问题是，在<{em> 你的imageSmoothingEnabled处理程序启动之前光栅化时，SVG图像在内部消除，所以当你将它绘制到画布上它已经消除锯齿 - 除了通过手动解析和渲染SVG（这不是一个小项目）之外，没有什么可以做到关闭它。

Answer 2

我相信这个问题虽然略有不同，但却解释了为什么你不能在SVG上使用drawImage方法。希望您觉得它有用：Is there an equivalent of canvas's toDataURL method for SVG?

Answer 3

在Alpha通道（found here）上使用巧妙的滤镜技术，您可以在将SVG中的所有元素渲染到画布之前对其进行“取消别名”。只需将其插入<svg>元素的顶部：

即可

<defs>
    <filter id="crispify">
        <feComponentTransfer>
            <feFuncA type="discrete" tableValues="0 1"/>
        </feComponentTransfer>
    </filter>
</defs>
<style>
    svg * {
        filter: url('#crispify');
    }
</style>

JSFiddle：https://jsfiddle.net/uqfgs477/1

适用于Chrome和Edge，而不适用于Firefox。

从没有消除锯齿的svg创建静态png，带或不带canvas

3 个答案: