使用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

本文关键字：高度 图像 宽度 100% CSS JavaScript HTML5 使用 显示 布内      更新时间：2023-09-26

如何使图像出现在特定高度和宽度的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';

目录

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

这是一个JSFIDDLE，但图像是谷歌的。如您所见，它被清楚地调整了大小/压缩。相反，我希望在那里看到全尺寸图像和某种滚动选项。

http://jsfiddle.net/jzF5R/

谢谢！

通过获取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'/>

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

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

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

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

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

添加 CSS 

#my_canvas{
  width:100%;
}
相关文章：