При рисовании с использованием jQuery изображение растягивается до HTML Canvas. - PullRequest
3 голосов
/ 06 июля 2010

Рассмотрим следующий код (включая jQuery):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src = "js/jquery-1.4.2.js"></script>
<script type="text/javascript">

jQuery(window).bind("load", function() {
    var elem = $("<canvas>", {width:300, height:300});

    var canvele = elem[0];


    var imm = new Image();

    imm.src = "card1/mask-x-6.png";
    imm.onload = function(){
        var ctx = canvele.getContext('2d');
        ctx.drawImage(imm, 0,0);
        $('body').append(elem);
    }
});


</script>
</head>
<body>

</body>
</html>

Это приведет к растягиванию изображения, а не к его исходному соотношению сторон.И на Firefox, и на Chrome.Почему это происходит?Обходные пути?


Обновление

Мои извинения, этого не произойдет, если я не использую jQuery для генерации элемента canvas.Я также опубликую это на форумах jQuery.

1 Ответ

8 голосов
/ 02 апреля 2011

Холст HTML5, как и изображение HTML, имеет как собственный размер - число пикселей в ширину и высоту исходного изображения - так и дисплей размер - насколько он большойрисуется на странице HTML.Если эти два размера установлены по-разному, изображение будет растянуто.

Код jQuery, который вы использовали для создания элемента canvas, устанавливает размер display равным 300x300px, устанавливая CSS widthи height атрибутов, но не устанавливает внутренний размер *1011* иначе, чем по умолчанию 300x150.Таким образом, все, что вы рисуете, будет растянуто в два раза.

Чтобы исправить это, непосредственно установите фактические атрибуты width и height элемента canvas.В следующем коде я сделал это исправление.Я также исправил использование HTML5 DOCTYPE, и я установил img.onload перед img.src:

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Setting Canvas Dimensions</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(function(){
  var elem = $("<canvas>", {width:300, height:300});
  var canvele = elem[0];
  canvele.width = canvele.height = 300;

  var imm = new Image;
  imm.onload = function(){
    var ctx = canvele.getContext('2d');
    ctx.drawImage(imm, 0,0);
    $('body').append(elem);
  };
  imm.src = "http://phrogz.net/tmp/gkhead.jpg";
});
</script>
</head><body></body></html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...