canvas.drawImage выводит обрезанное изображение из пропорции

При рендеринге следующего изображения (щелкните правой кнопкой мыши + просмотреть изображение, чтобы увидеть его в полном размере):

http://cdn.cocimg.com/bbs/attachment/Fid_14/14_29173_56b5563d9a81a86.png

размером 4800x320 с html5 canvas.drawImage() и пытаясь вырезать из него частичное изображение 480x320, холст раздувает изображение.

Вот мой код:

var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'my-canvas');
canvas.style.width = 480;
canvas.style.height = 320;
canvas.style.display = 'block';

document.body.appendChild(canvas);

var img=document.createElement('img');
img.src='http://cdn.cocimg.com/bbs/attachment/Fid_14/14_29173_56b5563d9a81a86.png';
img.onload = function () {
  var c=document.getElementById('my-canvas');
  var ctx=c.getContext('2d');
  ctx.drawImage(img,480,0,480,320,0,0,480,320);
}

также, когда я рисую изображение в меньшем масштабе, оно внезапно подходит:

var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'my-canvas');
canvas.style.width = 480;
canvas.style.height = 320;
canvas.style.display = 'block';

document.body.appendChild(canvas);

var img=document.createElement('img');
img.src='http://cdn.cocimg.com/bbs/attachment/Fid_14/14_29173_56b5563d9a81a86.png';
img.onload = function () {
  var c=document.getElementById('my-canvas');
  var ctx=c.getContext('2d');
  ctx.drawImage(img,480,0,480,320,0,0,240,160);
}

кто-нибудь знает, почему это так?


javascript canvas html css drawimage
person Dror Heller    schedule 17.06.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Размер растрового изображения холста по умолчанию составляет 300 x 150 пикселей. Установка размера CSS не изменит размер растрового изображения. Растровое изображение устанавливается со своими собственными свойствами/атрибутами ширины/высоты непосредственно на элементе. В противном случае растровое изображение будет растянуто, чтобы заполнить размер элемента CSS.

Измените это:

canvas.style.width = 480;
canvas.style.height = 320;

to

canvas.width = 480;
canvas.height = 320;

Вы также можете настроить свой код для повторного использования контекста:

//var c=document.getElementById('my-canvas'); // you already have this as canvas
var ctx=canvas.getContext('2d');              // global/parent scope

var img=document.createElement('img');
img.src='http://cdn.cocimg.com/bbs/attachment/Fid_14/14_29173_56b5563d9a81a86.png';
img.onload = function () {
  ctx.drawImage(img,480,0,480,320,0,0,480,320);
}
person Community    schedule 17.06.2015
comment
@DrorHeller нет проблем, рад, что смог помочь! :) - person ; 17.06.2015