WebKit Canvas drawImage () и Canvas не целочисленный коэффициент масштабирования ошибка? - PullRequest
Новая
       6

WebKit Canvas drawImage () и Canvas не целочисленный коэффициент масштабирования ошибка?

3 голосов
/ 28 октября 2010

У меня проблема с методом контекста canvas drawImage (), если изображение рисуется на холсте, у которого уже есть нецелочисленный масштабный коэффициент.Кажется, что такие изображения странным образом обрезаются (иногда самая правая часть изображения обрезается, иногда самая нижняя сторона, иногда оба).Эта проблема появляется, по крайней мере, в Google Chrome 6 (по крайней мере, стабильной), Chromium 6, возможно, даже в последних (dev-) сборках, и даже в 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>

Так это реальная ошибка?Или есть какие-то обходные пути?

Заранее спасибо.

UPD:

Давайте рассмотрим следующее изображение в кодировке BASE64 3x5: 

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAEklEQVR42mP4z8DwH4YZyOAAAMufHeNmMS0JAAAAAElFTkSuQmCC

1 Ответ

3 голосов
/ 29 октября 2010

Вы правы, это ошибка.

Разница между 

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

и 

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

массивно. Но только при рисовании изображений. При заполнении прямоугольника все работает правильно.

Я провел небольшое тестирование и сделал эту страницу для иллюстрации. Лучшие два с drawImage и масштабным коэффициентом 55 и 55.206143891243606. Они явно выглядят совсем по-другому.

Ниже представлены еще два полотна с одинаковыми масштабными коэффициентами и команда fillRect. Они выглядят хорошо.

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

Об этом следует сообщить трекеру проблем с хромом. Дайте мне знать, если вы хотите это сделать, иначе я сделаю это.

Хороший улов, кстати: D

...