11

我正在使用 Raphael 绘制一个对象，然后使用 canvg 将其传输到 HTML 画布元素，以便我可以使用 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>

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

另一个数据点。如果我用raphael输出一些文字再用canvg，不仅模糊而且字体不对！

在此处输入图像描述

这是建议的 test.rect(0.5,0.5,50,50) 。仍然模糊：

在此处输入图像描述

4

2 回答 2

16

所以我花了一段时间，但后来我恍然大悟。您所有的示例图像都是代码声称的大小的两倍。因此，您很可能使用某种 HDPI 设备（Retina MacBook Pro 等...）SVG 很棒，因为它的分辨率独立，而另一方面，画布则不是。您看到的问题与画布的渲染方式有关。要解决此问题，您需要准备画布，以便您的绘图将以屏幕的分辨率完成。

http://jsbin.com/liquxiyi/3/edit?html,js,输出

这个 jsbin 示例在任何屏幕上都应该看起来很棒。

诀窍：

var cv = document.getElementById('box');
var ctx = cv.getContext("2d");

// SVG is resolution independent. Canvas is not. We need to make our canvas 
// High Resolution.

// lets get the resolution of our device.
var pixelRatio = window.devicePixelRatio || 1;

// lets scale the canvas and change its CSS width/height to make it high res.
cv.style.width = cv.width +'px';
cv.style.height = cv.height +'px';
cv.width *= pixelRatio;
cv.height *= pixelRatio;

// Now that its high res we need to compensate so our images can be drawn as 
//normal, by scaling everything up by the pixelRatio.
ctx.setTransform(pixelRatio,0,0,pixelRatio,0,0);


// lets draw a box
// or in your case some parsed SVG
ctx.strokeRect(20.5,20.5,80,80);

// lets convert that into a dataURL
var ur = cv.toDataURL();

// result should look exactly like the canvas when using PNG (default)
var result = document.getElementById('result');
result.src=ur;

// we need our image to match the resolution of the canvas
result.style.width = cv.style.width;
result.style.height = cv.style.height;

这应该可以解释您遇到的问题，并希望为您指明解决问题的好方向。

于 2014-06-25T03:32:08.403 回答
6

本文中描述的另一种解决方案，类似于此处发布的解决方案，不同之处在于它正在使用scale()并且它考虑了后备存储的像素比（画布的浏览器底层存储）：

var devicePixelRatio = window.devicePixelRatio || 1,
    backingStoreRatio = context.webkitBackingStorePixelRatio ||
                        context.mozBackingStorePixelRatio ||
                        context.msBackingStorePixelRatio ||
                        context.oBackingStorePixelRatio ||
                        context.backingStorePixelRatio || 1,

    ratio = devicePixelRatio / backingStoreRatio;

// upscale the canvas if the two ratios don't match
if(devicePixelRatio !== backingStoreRatio){

   // adjust the original width and height of the canvas
   canvas.width = originalWidth * ratio;
   canvas.height = originalHeight * ratio;

   // scale the context to reflect the changes above
   context.scale(ratio, ratio);
}

// ...do the drawing here...

// use CSS to bring the entire thing back to the original size
canvas.style.width = originalWidth + 'px';
canvas.style.height = originalHeight + 'px';
于 2015-07-31T01:10:32.823 回答