相关疑难解决方法(0)

canvg生成的画布在视网膜屏幕上模糊

我正在使用Raphael绘制一个对象,然后使用canvg将其转移到HTML canvas元素,以便我可以使用toDataURL将其保存为PNG.但是当我使用canvg时,生成的图像会模糊不清.例如,下面的代码产生了这个(raphael在顶部,canvg在底部):

在此输入图像描述

<html>
    <head>
        <script src="lib/raphael-min.js"></script>
        <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
        <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
        <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
        <script src="lib/raphael.export.js"></script>
    </head>
    <body>

    <div id="raph_canvas"></div><br> 
    <canvas id="html_canvas" width="50px" height="50px"></canvas>

    <script language="JavaScript">
    var test=Raphael("raph_canvas",50,50);
    var rect=test.rect(0,0,50,50);
    rect.attr({fill: '#fff000', 'fill-opacity':1, 'stroke-width':1})

    window.onload = function() {
        var canvas_svg = test.toSVG();
        canvg('html_canvas',canvas_svg);
        var canvas_html = document.getElementById("html_canvas");
    }

    </script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

在toDataURL创建的png中也很明显.知道这里发生了什么吗？我不认为这与重新调整大小有关.我尝试过设置ignoreDimensions:True和其他一些东西.

另一个数据点.如果我使用raphael输出一些文本,然后使用canvg,它不仅模糊,而且字体错误!

在此输入图像描述