canvg生成的画布在视网膜屏幕上模糊
Aus*_*inC 10 javascript svg canvas raphael 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>
在toDataURL创建的png中也很明显.知道这里发生了什么吗？我不认为这与重新调整大小有关.我尝试过设置ignoreDimensions:True和其他一些东西.
另一个数据点.如果我使用raphael输出一些文本,然后使用canvg,它不仅模糊,而且字体错误!
这是test.rect(0.5,0.5,50,50)建议.仍然模糊:
eri*_*sti 14
所以我花了一段时间,但后来我突然明白了.您的所有示例图像都是代码声称的大小的两倍.所以你最有可能使用某种HDPI设备(Retina MacBook Pro等...)SVG很棒,因为它的分辨率独立,另一方面不是画布.您看到的问题与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;
这应该可以解释您所遇到的问题,并希望能为您指明解决问题的方向.
本文介绍的另一种解决方案，与此处发布的解决方案类似，不同之处在于它正在使用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';
| 归档时间： |
|
| 查看次数： |
5352 次 |
| 最近记录： |