javascript – 如何在Chrome上以高分辨率绘制画布?为什么如果devicePixelRatio === webkitBackingStorePixelRatio缩放到2倍提高分辨率?

我试图将300dpi图像绘制到画布对象,但在Chrome中它显示的质量非常差.当我使用下面的代码时,它没有改进,但那是因为devicePixelRatio与backingStoreRatio相同(都是1).

然后我尝试强制进行一些比率更改并找到以下内容:

>如果我将比率更改为2并强制缩放代码运行,则它会以更好的分辨率绘制到画布.
>如果我将比率改为大于2的任何比例(例如3,4,5,6等),那么它的分辨率就会很差!

这一切都是在台式计算机上完成的.

如何确保画布以高分辨率绘制?

(代码:http://www.html5rocks.com/en/tutorials/canvas/hidpi/)

/**
* Writes an image into a canvas taking into
* account the backing store pixel ratio and
* the device pixel ratio.
*
* @author Paul Lewis
* @param {Object} opts The params for drawing an image to the canvas
*/
function drawImage(opts) {

    if(!opts.canvas) {
        throw("A canvas is required");
    }
    if(!opts.image) {
        throw("Image is required");
    }

    // get the canvas and context
    var canvas = opts.canvas,
    context = canvas.getContext('2d'),
    image = opts.image,

    // now default all the dimension info
    srcx = opts.srcx || 0,
    srcy = opts.srcy || 0,
    srcw = opts.srcw || image.naturalWidth,
    srch = opts.srch || image.naturalHeight,
    desx = opts.desx || srcx,
    desy = opts.desy || srcy,
    desw = opts.desw || srcw,
    desh = opts.desh || srch,
    auto = opts.auto,

    // finally query the various pixel ratios
    devicePixelRatio = window.devicePixelRatio || 1,
    backingStoreRatio = context.webkitBackingStorePixelRatio ||
    context.mozBackingStorePixelRatio ||
    context.msBackingStorePixelRatio ||
    context.oBackingStorePixelRatio ||
    context.backingStorePixelRatio || 1,    
    ratio = devicePixelRatio / backingStoreRatio;

    // ensure we have a value set for auto.
    // If auto is set to false then we
    // will simply not upscale the canvas
    // and the default behaviour will be maintained
    if (typeof auto === 'undefined') {
        auto = true;
    }

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

        var oldWidth = canvas.width;
        var oldHeight = canvas.height;

        canvas.width = oldWidth * ratio;
        canvas.height = oldHeight * ratio;

        canvas.style.width = oldWidth + 'px';
        canvas.style.height = oldHeight + 'px';

        // now scale the context to counter
        // the fact that we've manually scaled
        // our canvas element
        context.scale(ratio, ratio);

    }

    context.drawImage(pic, srcx, srcy, srcw, srch, desx, desy, desw, desh);
}

仅进行以下更改会产生高分辨率的画布图像(为什么?):

    //WE FORCE RATIO TO BE 2
    ratio = 2;

    //WE FORCE IT TO UPSCALE (event though they're equal)
    if (auto && devicePixelRatio === backingStoreRatio) {

如果我们改变上面的比例为3,它就不再是高分辨率了!

编辑:一个额外的观察 – 即使有2倍的比例,虽然它的分辨率明显更好,它仍然不如在img标签中显示图像那么清晰)

最佳答案
从问题链接的HTML5Rocks文章使事情变得比他们需要的更困难,但它与我见过的其他资源(1,2,3,4)产生了同样的基本错误.这些参考文献对此公式进行了一些修改:

var rect = canvas.getBoundingClientRect();
canvas.width = Math.round (devicePixelRatio * rect.width); // WRONG!

公式错了.一个更好的公式是

var rect = canvas.getBoundingClientRect();
canvas.width = Math.round (devicePixelRatio * rect.right)
             - Math.round (devicePixelRatio * rect.left);

关键是,通过devicePixelRatio缩放宽度或高度(即两个位置的差异)是没有意义的.你应该只扩展绝对位置.我找不到这个确切点的参考,但我认为很明显,一旦你得到它.

主张.

无法从CSS宽度和高度(与设备无关的像素)计算矩形(在设备像素中)的物理宽度和高度.

证明.

假设您有两个元素,其边界矩形与设备无关的像素是

{ left:   0, top:  10, right:   8, bottom:  20, width:   8, height:  10 },
{ left:   1, top:  20, right:   9, bottom:  30, width:   8, height:  10 }.

现在假设devicePixelRatio为1.4,元素将覆盖这些设备像素矩形:

{ left:   0, top:  14, right:  11, bottom:  28, width:  11, height:  14 },
{ left:   1, top:  28, right:  13, bottom:  42, width:  12, height:  14 },

其中left,top,right和bottom乘以devicePixelRatio并四舍五入到最接近的整数(使用Math.round()).

您会注意到两个矩形在与设备无关的像素中具有相同的宽度,但在设备像素中具有不同的宽度. ▯

测试.

这是一个用于测试的代码示例.将其加载到浏览器中,然后使用鼠标放大和缩小.最后一个画布应该总是有尖锐的线条.
其他三个在某些决议上会模糊不清.

测试桌面Firefox,IE,Edge,Chrome和Android Chrome和Firefox. (注意,这在JSfiddle上不起作用,因为getBoundingClientRect在那里返回不正确的值.)

<!DOCTYPE html>
<html>
  <head>
    <script>
      function resize() {
        var canvases = document.getElementsByTagName("canvas");
        var i, j;
        for (i = 0; i != canvases.length; ++ i) {
          var canvas = canvases[i];
          var method = canvas.getAttribute("method");
          var dipRect = canvas.getBoundingClientRect();
          var context = canvas.getContext("2d");
          switch (method) {
            case "0":
              // Incorrect:
              canvas.width = devicePixelRatio * dipRect.width;
              canvas.height = devicePixelRatio * dipRect.height;
              break;

            case "1":
              // Incorrect:
              canvas.width = Math.round(devicePixelRatio * dipRect.width);
              canvas.height = Math.round(devicePixelRatio * dipRect.height);
              break;

            case "2":
              // Incorrect:
              canvas.width = Math.floor(devicePixelRatio * dipRect.width);
              canvas.height = Math.floor(devicePixelRatio * dipRect.height);
              break;

            case "3":
              // Correct:
              canvas.width = Math.round(devicePixelRatio * dipRect.right)
                - Math.round(devicePixelRatio * dipRect.left);
              canvas.height = Math.round(devicePixelRatio * dipRect.bottom)
                - Math.round(devicePixelRatio * dipRect.top);
              break;
          }
          console.log("method " + method
            + ", devicePixelRatio " + devicePixelRatio
            + ", client rect (DI px) (" + dipRect.left + ", " + dipRect.top + ")"
            + ", " + dipRect.width + " x " + dipRect.height
            + ", canvas width, height (logical px) " + canvas.width + ", " + canvas.height);

          context.clearRect(0, 0, canvas.width, canvas.height);
          context.fillStyle = "cyan";
          context.fillRect(0, 0, canvas.width, canvas.height);
          context.fillStyle = "black";
          for (j = 0; j != Math.floor (canvas.width / 2); ++ j) {
            context.fillRect(2 * j, 0, 1, canvas.height);
          }
        }
      };
      addEventListener("DOMContentLoaded", resize);
      addEventListener("resize", resize);
    </script>
  </head>
  <body>
    <canvas method="0" style="position: absolute; left: 1px; top: 10px; width: 8px; height: 10px"></canvas>
    <canvas method="1" style="position: absolute; left: 1px; top: 25px; width: 8px; height: 10px"></canvas>
    <canvas method="2" style="position: absolute; left: 1px; top: 40px; width: 8px; height: 10px"></canvas>
    <canvas method="3" style="position: absolute; left: 1px; top: 55px; width: 8px; height: 10px"></canvas>
  </body>
</html>

转载注明原文:javascript – 如何在Chrome上以高分辨率绘制画布?为什么如果devicePixelRatio === webkitBackingStorePixelRatio缩放到2倍提高分辨率? - 代码日志