Блог

Главная - Вопросы по программированию - ctx.drawImage рисует только половину изображения

ctx.drawImage рисует только половину изображения

#javascript #canvas

#javascript #холст

Вопрос:

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

 var image = new Image();
image.crossOrigin = 'Anonymous';
image.onload = function() {
  var canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0);
  canvas.style.position = 'absolute';
  canvas.style.top = 0;
  canvas.style.left = 0;
  document.body.appendChild(canvas);
}
image.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg';

Кто-нибудь видит, что не так с вышесказанным? Любые предложения были бы очень полезны!

Комментарии:

1. размер холста меньше, чем изображение.

2. Аааа, это любопытно. Во всех примерах, которые я видел, не задавался размер холста; они просто позволяют изображению изменять размер холста. Я задам размер холста явно…

3. 300×150 — это размер элемента canvas по умолчанию: html.spec.whatwg.org/multipage/canvas.html#the-canvas-element

4. @appleapple если вы сделаете свой комментарий ответом, я с радостью приму!

Ответ №1:

Потому что размер холста меньше, чем изображение

Просто установите размер холста таким, какой вам нужен, и вы сможете увидеть все изображение.

 let image = new Image();
image.crossOrigin = 'Anonymous';
image.onload = function() {
  let canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  let ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0);
  document.body.appendChild(canvas);
}
image.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg';

Кстати, вы можете задать размер в css, и у вас останется тот же размер холста (css просто растянет его).

 //same code above
let image = new Image();
image.crossOrigin = 'Anonymous';
image.onload = function() {
  let canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  let ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0);
  document.body.appendChild(canvas);
}
image.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg';  
 canvas{width:200px; height:100px;}