Question

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

树形象=＆＃39; http://kornyezet.sze.hu/images/oktatok/tree3.jpg＆＃39;

我希望上面树的这张图片在您可以滚动的内容中达到100％的大小。

E.g。喜欢＆＃34;溢出：滚动＆＃34;选项显示为蓝色。 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/

谢谢！

Answer 1

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

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

Answer 2

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

在此之后你需要在右侧透视图上的画布上绘制图像，这需要设置imageObj，然后将左上角设置为0,0，将右下角设置为{{} 1}}图片

你可以阅读更多关于它this link

的信息

＆＃13;

width,height

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 4

添加CSS

#my_canvas{
  width:100%;
}

使用JavaScript在CSS5 Canvas中显示特定宽度/高度的完整图像大小（100％宽度/高度），也许是CSS

4 个答案: