canvg生成的画布在视网膜屏幕上模糊 [英] Canvas generated by canvg is blurry on retina screen
问题描述
我使用Raphael绘制一个对象，然后将其传递到一个带有canvg的HTML canvas元素，以便我可以使用toDataURL将其保存为PNG。但是当我使用canvg时，产生的图像是模糊的。例如，下面的代码生成这个（顶部的raphael，底部的canvg）：
I'm using Raphael to draw an object, then transferring it to an HTML canvas element with canvg so that I can use toDataURL to save it as a PNG. But when I use canvg, the resulting image is blurry. The code below, for example, produces this (raphael on top, canvg on bottom):
<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>
在byDataURL创建的png中，模糊性很明显。任何想法在这里发生了什么？我不认为这与重新调整大小有任何关系。我已经尝试设置ignoreDimensions：True和其他一些东西。
The blurriness is evident in the png created by toDataURL as well. Any idea what is going on here? I don't think this has anything to do with re-sizing. I've tried setting ignoreDimensions: True and some other things.
另一个数据点。如果我使用raphael输出一些文本，然后使用canvg，它不仅是模糊，而是错误的字体！
Another datapoint. If I use raphael to output some text and then use canvg, it is not only blurry but the wrong font!
这里是test.rect（0.5,0.5,50,50） 。仍然模糊：
And here is the test.rect(0.5,0.5,50,50) suggested. Still blurry:
p>
推荐答案
所以这花了我一段时间，但后来我开始了。所有的示例图像是代码声明的大小的两倍。所以你很可能是在某种HDPI设备（Retina MacBook Proct ...）SVG是伟大的，因为它的分辨率独立，画布另一方面是不是。你看到的问题与canvas如何渲染有关。要解决这个问题，您需要准备画布，以便您的绘制将以屏幕分辨率完成。
So it took me a while, but then it dawned on me. All your example images are twice the size the code claims they should be. So you're most likely on some sort of HDPI device (Retina MacBook Pro ect...) SVG is great because its resolution independent, canvas on the other hand is not. The issue you're seeing has to do with how canvas renders. To fix this, you need to prep the canvas so that your drawing will be done at the resolution of your screen.
http://jsbin.com/liquxiyi/3/edit?html,js,output
这个jsbin示例在任何屏幕上应该看起来不错。
This jsbin example should look great on any screen.
诀窍：
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;
这应该解释你遇到的问题，希望指出一个很好的方向来解决它。
This should explain the issue you're having, and hopefully point you in a good direction to fix it.
这篇关于canvg生成的画布在视网膜屏幕上模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
