HTML5 画布：图像大小调整

Posted 2023-03-05

【中文标题】HTML5 画布：图像大小调整

【英文标题】：HTML5 canvas: image resizing

【发布时间】：2011-05-09 04:11:37

【问题描述】：

我正在尝试将图像放置在画布上而不调整其大小。我认为 drawImage(img, x, y) 可以解决问题，但它会拉伸图像以填充画布。 还提供带有我图像尺寸的 drawImage(img, x, y, width, height) 似乎不起作用。

这是我的代码：

<canvas id="story" style="position:relative; width:800px; height:600px;"></canvas>

<script type="text/javascript">

window.onload = function() 
  var canvas = document.getElementById("story");
  var context = canvas.getContext("2d");
  var img = document.getElementById("img1");
  var width = parseInt(img.width);
  var height = parseInt(img.height);
  context.drawImage(img, 0, 0, width, height);


</script>
<img id="img1"  src="http://link to image"/>

提前致谢！

PS：我添加了 parseInt 以确保 drawImage 获得有效值。

【问题讨论】：

当我调用 drawImage（在 Firefox 3.6 和 Chrome 9 中）时，它不会拉伸以填充画布。您能否向我们展示一个发生这种情况的示例 (jsfiddle)？

【参考方案1】：

尝试使用我最近创建的这个库，它可以加载图像，将其调整为固定宽度和高度或百分比，转换为 base64 或 blob 等其他格式，并允许您应用水印。

var CanvaWork = new CanvaWork();

CanvaWork.loadImage("yourimage.png", function(obj)
    console.log(obj.canvas);  // The usable canvas
    console.log(obj.width);
    console.log(obj.height);
    console.log(obj.image); // Contains the image file
);

https://github.com/vnbenny/canvawork.js

希望对你有帮助！

【参考方案2】：

您必须先完美加载函数图像，然后才能在屏幕上渲染，然后按照以下代码进行操作..

<img id="demo-img" src="image_name.png">

<br>

<canvas id="myCanvas"   style="border:1px solid #d3d3d3">Your browser does not support the html5 canvas tag
</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("demo-img");
    img.onload=function fun()ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width,img.height)
 </script> 

【参考方案3】：

还要确保获取图像的宽度和高度，并在加载后绘制它。

img.onload = function () 
  var width = parseInt(img.width);
  var height = parseInt(img.height);
  context.drawImage(img, 0, 0, width, height);
;

【参考方案4】：

Trochoid 是对的，画布标签上的样式属性会导致问题。您可以按照他的建议在 HTML 中设置它，或者更好的是，您可以将其留空并在 JS 中动态设置：

<canvas id="story"></canvas>

<script type="text/javascript">

window.onload = function() 
      var canvas = document.getElementById("story");
      var context = canvas.getContext("2d");
      var img = document.getElementById("img1");
      var width = parseInt(img.width);
      var height = parseInt(img.height);

      canvas.height=height;
      canvas.width=width;
      context.drawImage(img, 0, 0);


</script>
<img id="img1"  src="http://link to image"/>

【参考方案5】：

不要使用 CSS 来调整画布的大小。这将创建一个默认大小的画布并拉伸它。直接在上面设置画布尺寸，你会得到一个1到1像素的绘图空间。

<canvas id="story"   style="position:relative;"></canvas>

【讨论】：

感谢您的快速答复！拯救了我的星期五！

非常感谢您；我一直很头疼，试图弄清楚为什么尽管在 drawImage() 中设置了正确的源和目标尺寸，但图像仍然会不成比例地绘制！如果可以的话，我会给你 100 票赞成这个答案！