我正在使用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>
在toDataURL创建的png中，模糊也很明显。知道这里发生了什么吗？我认为这与调整大小无关。我试过设置ignoreDimensions:True和其他一些东西。
另一个数据点。如果我使用raphael输出一些文本然后使用canvg，则不仅模糊而且字体错误!
这是建议的test.rect(0.5,0.5,50,50)。仍然模糊:
最佳答案
所以花了我一段时间，但后来它突然出现在我身上。您所有的示例图像的大小都是代码要求的两倍。因此，您最有可能在某种HDPI设备(Retina MacBook Pro等)上使用SVG，因为它的分辨率独立，而 Canvas 却不是。您看到的问题与 Canvas 的渲染方式有关。要解决此问题，您需要准备 Canvas ，以便在屏幕分辨率下完成绘制。
http://jsbin.com/liquxiyi/3/edit?html,js,output
这个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;
这应该可以解释您遇到的问题，并希望为您指出一个解决问题的好方向。