3

既に整数以外の倍率を持つキャンバスに画像が描画されている場合、キャンバス コンテキストの drawImage() メソッドに問題があります。このような画像は奇妙な方法で切り取られているようです (画像の一番右の部分が切り取られる場合もあれば、最も下側が切り取られる場合もあれば、両方が切り取られる場合もあります)。この問題は、少なくとも Google Chrome 6 (少なくとも安定版)、Chromium 6、おそらく最新の (開発) ビルド、さらには Safari 5 で発生します。Firefox にはこのバグはありません。明らかに、私が間違っていなければ、これは Webkit の問題です。次のコードを見てみましょう (デモ用にコード全体を提供)。

<html>
<head>
  <style type="text/css">
    canvas {
      border: solid 1px black;
    }
  </style>
  <script type="text/javascript">    
    window.onload = function() {
      var canvas = document.getElementById("canvas");
      var increase = document.getElementById("increase");
      var decrease = document.getElementById("decrease");
      var scale = document.getElementById("scale");
      var context = canvas.getContext("2d");
      var image = new Image();
      image.src = "image-3x5.png";
      var scaleX = 1;
      var scaleY = 1;
      var repaint = function() {
        scale.innerHTML = scaleX + "; " + scaleY;
        context.fillStyle = "#FFF";
        context.fillRect(0, 0, 1000, 750);
        context.drawImage(image, 0, 0, 3, 5);
      };
      var scaleXF = 1.2; // change both to 2 and it will be fixed
      var scaleYF = 1.2;
      decrease.onclick = function() {
        scaleX /= scaleXF;
        scaleY /= scaleYF;
        context.scale(1 / scaleXF, 1 / scaleYF);
        repaint();
      };
      increase.onclick = function() {
        scaleX *= scaleXF;
        scaleY *= scaleYF;
        context.scale(scaleXF, scaleYF);
        repaint();
      };
      repaint();
    };
  </script>
</head>
<body>
  <div>
    <span id="scale"></span>
  </div>
  <div>
    <canvas id="canvas" width="1000" height="750"></canvas>
  </div>
  <div>    
    <input id="decrease" type="button" value="decrease" />    
    <input id="increase" type="button" value="increase" />    
  </div>
</body>
</html>

それで、それは本当のバグですか？または、回避策はありますか？

前もって感謝します。

更新:

次の BASE64 でエンコードされた 3x5 画像があるとします。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAEklEQVR42mP4z8DwH4YZyOAAAMufHeNmMS0JAAAAAElFTkSuQmCC
4

1 に答える 1

3

そうです、それはバグです。

の違い

context.setTransform(1*55.206143891243606, 0, 0, 1*55.206143891243606, 0, 0);

と

context.setTransform(1*55, 0, 0, 1*55, 0, 0);

巨大です。ただし、画像を描画する場合のみ。長方形を塗りつぶすと、正しく機能します。

私は少しテストを行い、説明のためにこのページを作成しました。上の2つは、drawImageと、55および55.206143891243606の倍率です。それらは明らかに非常に異なって見えます。

以下は、それぞれの倍率が同じで、fillRectコマンドを使用した2つのキャンバスです。彼らは元気に見えます。

http://simonsarris.com/misc/badscale.html

これは、クロム問題追跡システムに報告する必要があります。あなたがそれをしたいなら私に知らせてください、そうでなければ私はそれをします。

ちなみに良いキャッチ：D

于 2010-10-29T01:47:17.690 に答える