javascript - ctx.drawImage 仅绘制图像的一半

Question

我正在尝试加载图像然后将其绘制到 Canvas 上，但目前我只能渲染一半图像:

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';

有人看出上面有什么问题吗？任何建议都会非常有帮助!

Answer 1

因为 Canvas 尺寸小于图像

只需将 Canvas 大小设置为您需要的大小，您就可以看到所有图像。

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 中设置大小，并且仍然具有相同的 Canvas 大小(css 只是拉伸(stretch)它)。

//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;}