ctx.drawImage 只绘制图像的一半答案

【问题标题】：ctx.drawImage only drawing half of imagectx.drawImage 只绘制图像的一半
【发布时间】：2019-09-12 22:58:39
【问题描述】：

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

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

有没有人看到上面有什么问题？任何建议都会非常有帮助！

【问题讨论】：

画布尺寸小于图片。
啊，这很好奇。我见过的所有例子都没有设置画布大小。他们只是让图像大小画布。我将明确设置画布大小...
300x150 是画布元素的默认大小：html.spec.whatwg.org/multipage/canvas.html#the-canvas-element
@appleapple 如果您将您的评论作为答案，我将很乐意接受！

标签： javascript canvas

【解决方案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;}

【讨论】：