使用 JavaScript，可能是 CSS，在特定宽度/高度的 HTML5 画布内显示完整图像大小（100% 宽度/高度）答案

【问题标题】：Display the Full Image Size (100% Width/Height) inside a HTML5 Canvas of a certain Width/Height using JavaScript, maybe CSS使用 JavaScript，可能是 CSS，在特定宽度/高度的 HTML5 画布内显示完整图像大小（100% 宽度/高度）
【发布时间】：2016-07-15 10:40:34
【问题描述】：

如何使图像显示在具有特定高度和宽度的 HTML5 画布中，但图像以 100% 大小显示？换句话说，保持图像的纵横比大小不变。

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

我希望上述树的这张图片在可以滚动的范围内为 100% 大小。

例如就像以蓝色显示的“溢出：滚动”选项。 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，但图片是 Google 的。如您所见，它已明显调整大小/压缩。相反，我希望在那里可以看到完整尺寸的图像和某种滚动选项。

http://jsfiddle.net/jzF5R/

谢谢！

【问题讨论】：

ctx.drawImage(source, sourceX, sourceY, sourceWidth, sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight) 使用这些参数，您可以根据需要调整图像大小和裁剪图像。如果你真的想要一个滚动条：stackoverflow.com/a/36233727/3702797 保持纵横比：stackoverflow.com/a/34429774/3702797。祝你好运。
stackoverflow.com/questions/4938346/…
你的意思是像CSS背景“封面”吗？检查这是否是您想要的：stackoverflow.com/questions/21961839/…

标签： javascript css html canvas

【解决方案1】：

添加 CSS

#my_canvas{
  width:100%;
}

【讨论】：

您能否更新您的答案并包含一个完整的工作示例，例如通过编辑提供的 JSFiddle？

【解决方案2】：

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

在此之后，您需要在画布上以右透视图绘制图像，设置为imageObj，然后将左上角设置为0,0，将右下角设置为图像的width,height

你可以阅读更多关于它的信息 int this link

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

【讨论】：

【解决方案3】：

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

&lt;canvas id="my_canvas" style="border:2px solid;"&gt;&lt;/canvas&gt;

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

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

【讨论】：

【解决方案4】：

这是因为画布的实际宽度和框的宽度之间存在差异。

所以，如果你这样做，那应该可以工作:)。

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

【讨论】：