个人中心
gpt4 book ai didi

javascript - canvg 生成的 Canvas 在视网膜屏幕上模糊

转载 作者：可可西里 更新时间：2023-11-01 02:55:50 33 4
gpt4 key购买 nike

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

enter image description here 

<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，它不仅模糊而且字体错误!

enter image description here

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

enter image description here

最佳答案

所以我花了一段时间，但后来我明白了。您所有的示例图像的大小都是代码声称的两倍。所以你很可能在使用某种 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;

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

关于javascript - canvg 生成的 Canvas 在视网膜屏幕上模糊，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24395076/

33 4 0
文章推荐： networking - 除了 UDP 广播或多播，我还可以在 WiFI 网络上使用哪些其他方法来发现计算机？
文章推荐： c++ - 带有 XML 的 TCP 消息结构
文章推荐： language-agnostic - tcp底层传输机制/网络编程
文章推荐： java - 从 CardLayout 中删除 JComponent
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com