个人中心
gpt4 book ai didi

javascript - 如何在 Chrome 上以高分辨率绘制 Canvas ？为什么如果 devicePixelRatio === webkitBackingStorePixelRatio 缩放到 2 倍会提高分辨率？

转载 作者：太空狗 更新时间：2023-10-29 13:42:47 31 4
gpt4 key购买 nike

我正在尝试将 300dpi 图像绘制到 Canvas 对象，但在 Chrome 中它显示的质量很差。当我使用下面的代码时，它没有改善，但那是因为 devicePixelRatio 与 backingStoreRatio 相同(均为 1)。

然后我尝试强制更改一些比率并发现以下内容:

  • 如果我将 ratio 更改为 2 并强制运行缩放代码，则它会以更好的分辨率绘制到 Canvas 上。
  • 如果我将 ratio 更改为大于 2 的值(例如 3、4、5 、6 等)然后它的分辨率差!

这一切都是在台式电脑上完成的。

如何确保 Canvas 以高分辨率绘制？

(代码来自: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);
}

仅进行以下更改会产生高分辨率 Canvas 图像(为什么？):

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

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

如果我们把上面的比例改成3，就不是高分辨率了!

编辑:一个额外的观察——即使是 2x 比率，虽然它的分辨率明显更好，但它仍然不如在 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())。

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

测试。

这是一个用于测试的代码示例。在浏览器中加载它，然后用鼠标放大和缩小。最后一张 Canvas 应该总是有清晰的线条。其他三个在某些分辨率下会很模糊。

在桌面 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 上以高分辨率绘制 Canvas ？为什么如果 devicePixelRatio === webkitBackingStorePixelRatio 缩放到 2 倍会提高分辨率？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19142993/

31 4 0
文章推荐： android - 如果 Canvas 旋转，Canvas.getClipBounds() 会返回什么？
文章推荐： git - 调整脚本以 pull 所有远程分支
文章推荐： git - 如何分支并包含未决 pull 请求中的更改
文章推荐： javascript - 为什么 MutationObserver 代码不能在 Chrome 30 上运行？
太空狗
个人简介

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

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