使用JavaScript和可能的CSS，在HTML5 Canvas中显示特定宽度/高度的完整图像尺寸（100％宽度/高度）。

Question

如何在HTML5画布中显示一个指定高度和宽度的图像，但让图像以100％的大小显示？换句话说，保持图像的纵横比大小不变。

树形图像= 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg'

我希望这张树的图片能够以100％的大小出现在可以滚动的区域内。

例如，像蓝色显示的“overflow: scroll”选项。 http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow 图像必须在Javascript中使用源。

Javascript:

var canvas = document.getElementById('my_canvas'); 
var ctx = canvas.getContext('2d'); 
var imageObj = new Image(); 
ctx.canvas.width = 100; ctx.canvas.height = 100; 
imageObj.onload = function() { 
    ctx.drawImage(imageObj, 0, 0,100,100); 
}; 
imageObj.src = 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg';

Html

<canvas id="my_canvas"></canvas>

这里有一个JSFIDDLE，但图片是谷歌的。正如你所看到的，它明显被调整大小/压缩了。相反，我想让完整尺寸的图像在那里显示，并提供某种滚动选项。

http://jsfiddle.net/jzF5R/

谢谢！

- Dil

---

使用以下参数ctx.drawImage(source, sourceX, sourceY, sourceWidth, sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight)，您可以根据需要调整和裁剪图像大小。如果您真的想要一个滚动条：https://dev59.com/5JXfa4cB1Zd3GeqPemzq#36233727 保持纵横比：http://stackoverflow.com/a/34429774/3702797。祝你好运。 - Kaiido

https://dev59.com/ZW445IYBdhLWcg3wTIZf?rq=1 - user2543022

你是指像CSS背景“cover”一样吗？请检查这是否是您想要的内容：https://dev59.com/PWEh5IYBdhLWcg3w1mfs#21961894 - user1693593

Answer 1

通过获取 img 的宽度和高度，在图像加载后将 canvas.width 和 canvas.height 设置为它，就可以设置正确的画布大小。

之后，您需要在正确的透视图上将图像绘制到画布上。这可通过设置 imageObj，然后将左上角设置为 0, 0，右下角设置为图像的 width, height 来完成。

您可以在 此链接 中阅读更多相关内容。

var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = document.getElementById('img');
  imageObj.onload = function(e) {
  ctx.canvas.width = imageObj.width;
  ctx.canvas.height = imageObj.height;
  
    ctx.drawImage(imageObj, 0, 0,imageObj.width,imageObj.height);
    
  };
  imageObj.src = 'https://www.google.com/images/srpr/logo4w.png';

canvas{
  width:100%;
  height:100%;
  position:absolute;

}

  <canvas id="my_canvas"></canvas>
  <img style='display:none;'id='img'/>

- Zamboney

Answer 2

var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0,window.innerWidth,window.innerHeight);
  };
  imageObj.src = 'https://www.google.com/images/srpr/logo4w.png';

<canvas id="my_canvas" style="border:2px solid;"></canvas>

  var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  alert(window.innerWidth+"X"+window.innerHeight);
  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0,window.innerWidth,window.innerHeight);
  };
  imageObj.src = 'https://www.google.com/images/srpr/logo4w.png';

这可能有所帮助... :)

- Deepraj Kanulkar

Answer 3

这是因为您的画布实际宽度与盒子宽度之间存在差异。

因此，如果您这样做，那应该可以解决问题 :)

var canvas = document.getElementById('my_canvas'); 

// What you have to add:
// You can choose clientWidth, offsetWidth... that depends on what you want.
canvas.width = canvas.offsetWidth;

var ctx = canvas.getContext('2d'); 
var imageObj = new Image();
imageObj.onload = function() { 
    ctx.drawImage(imageObj, 0, 0,100,100); 
}; 
imageObj.src = 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg';

- Al3x_M

Answer 4

添加 CSS

#my_canvas{
  width:100%;
}

- Balvant Ahir

---

你能否更新你的回答并提供一个完整的工作示例，例如通过编辑提供的JSFiddle？ - Frank van Wijk