javascript - 使用 JavaScript(可能是 CSS)在特定宽度/高度的 HTML5 Canvas 中显示完整图像尺寸(100% 宽度/高度)

Question

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

TreeMap 像 = ' 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/

谢谢!

Answer 1

通过获取img的宽高，图片加载后设置canvas.width和canvas.height为你可以设置合适的 Canvas 大小

在此之后，您需要在 Canvas 上以正确的视角绘制图像，设置 imageObj 然后将左上角设置为 0,0 并完成此操作图片的width,height右下角

你可以阅读更多关于它的信息 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'/>