将图像动态加载到覆盖的画布中并调整它们的大小

Posted 2023-03-25

【中文标题】将图像动态加载到覆盖的画布中并调整它们的大小

【英文标题】：Dynamically load images into overlayed canvases and resize them

【发布时间】：2021-10-02 06:23:56

【问题描述】：

我有两个重叠的画布。现在我想将图像动态加载到画布中，并根据图像大小调整它们的大小。

我现在的问题是，在画布加载图像并自行调整大小后，它们会覆盖下面的所有其他 html 项。

这是最简单的例子：

loadimage.onclick = function(e) 
  //load image1
  var img1 = new Image();

  img1.onload = function() 
    var canvas = document.getElementById("canvas1");
    var ctx = canvas.getContext("2d");

    //resize canvas1
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    ctx.drawImage(this, 0, 0);
  ;

  img1.src = "https://via.placeholder.com/250/0000FF/808080/";


  //load image2
  var img2 = new Image();

  img2.onload = function() 
    var canvas = document.getElementById("canvas2");
    var ctx = canvas.getContext("2d");

    //resize canvas1
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    ctx.drawImage(this, 75, 75);
  ;

  img2.src = "https://via.placeholder.com/50/00FF00/808080/";

<div id="container" style="position: relative; width: 200px; height: 100px;">
  <canvas id="canvas1"   style="position: absolute; left: 0; top: 0; z-index: 0; border: 1px solid #000;"></canvas>
  <canvas id="canvas2"   style="position: absolute; left: 0; top: 0; z-index: 1; border: 1px solid #000;"></canvas>
</div>

<button id="loadimage" type="button">Load Content</button>

按下“加载内容”后 按钮，按钮不会向下移动。

我还尝试更改“容器”的宽度和高度属性 div，但行为没有改变。

我在这里错过了什么？

【问题讨论】：

你为什么使用画布？普通的img/picture元素就足够了。

在我的原始代码中，我正在进一步处理画布中的图像（绘制、调整上层图像的大小等）

【参考方案1】：

所以，代码有很多问题。如果您是初学者，请不要担心。这很正常。 ☺

首先，<canvas>是对标签。这意味着您必须使用</canvas> 将其关闭。正确的形式是<canvas someattribute="somevalue"></canvas>。在<canvas> 标记内放置替代内容，当浏览器不支持<canvas> 标记时将使用它（这是相当新的）。

省略 </canvas> 会破坏页面。

HTML 规定了哪些标签必须关闭，哪些不应该关闭，<canvas> 是 必须 关闭的标签之一。 The Validator 可以帮助您识别代码中的错误。请注意，这是相当迂腐的。

第二个问题是您使用了绝对定位，并且画布在调整大小时覆盖了按钮。只需禁用定位或使用一些更精确的定位方式。第三种选择是在 JS 中适当调整容器 div 的大小。

容器 div 也设置了固定大小。默认情况下，当内容变大时，溢出。

您可能试图使用z-index 来解决它。设置 z-indexes 通常非常棘手，我尝试将其用作最后的手段。您的两个 z-index 属性均无效。 是z-index: NUMBER，不是z- index 或z index。

我发现的最后一个错误是您在第二个函数中使用了canvas1（未定义变量）而不是canvas。

loadimage.onclick = function(e) 
  //load image1
  var img1 = new Image();

  img1.onload = function() 
    var canvas = document.getElementById("canvas1");
    var ctx = canvas1.getContext("2d");

    //resize canvas1
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    ctx.drawImage(this, 0, 0);
  ;

  img1.src = "https://via.placeholder.com/250/0000FF/808080/";


  //load image2
  var img2 = new Image();

  img2.onload = function() 
    var canvas = document.getElementById("canvas2");
    var ctx = canvas.getContext("2d");

    //resize canvas1
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    ctx.drawImage(this, 0, 0);
  ;

  img2.src = "https://via.placeholder.com/50/00FF00/808080/";

<div id="container">
  <canvas id="canvas1"   style="border: 1px solid #000;"></canvas>
  <canvas id="canvas2"   style="border: 1px solid #000;"></canvas>
</div>

<button id="loadimage" type="button">Load Content</button>

【讨论】：

等一下，我补充说明。

感谢您指出错误，我在我的问题中修复了它们。你回答的例子只是并排显示图像，但我覆盖了画布，因为我想在第一个图像之上显示第二个图像。类似于 Photoshop（或类似的图像编辑软件）中的图层功能。

而且，当您想绘制多张图像时，您可以将它们都绘制到一个画布上。

所以当我想稍后编辑顶部的图像时，例如旋转、更改 alpha 值，我总是必须重新绘制完整的图像？

@al3xst 是的，这是一个选项。如果您正在使用图形编辑器，则可能需要它。当您让 CSS 和浏览器的渲染引擎为您完成工作时，它可能不会做任何不同的事情。如果您将使用大图像，请将它们缩小一次并渲染缩小后的版本。