fabricjs图像放置对齐问题答案

【问题标题】：fabricjs image placing alignment issuefabricjs图像放置对齐问题
【发布时间】：2021-06-14 10:11:46
【问题描述】：

上传图片预览后，我使用fabricjs进行图片上传和css引导。

当我单击图像 hsa 进入右侧但它进入底部时。

这是我的html

        <div class="container-fluid" style="border:1px solid red">
      <div class="row">
        <div class="col-md-6">
          <img *ngFor="let item of urls" (click)="onClik(item)"  [src]="item.url" class="rounded mb-3" width="180">
          <input type="file" multiple (change)="detectFiles($event)">
          <br/>
          <h1>Preview</h1>
        </div>
        <div class="col-md-6">
          <div id="mainarea">
          </div>
        </div>
      </div>
    </div>

这是我的stackblitz 链接

示例我的图像现在的显示方式

【问题讨论】：

你已经修复了吗？查看并排显示多张图片的 stackblitz
@khajaamin 没有还在挣扎

标签： javascript angular fabricjs

【解决方案1】：

主要问题是您没有将新创建的画布附加到您的容器元素（实际上，您只是声明了container，但您根本不使用它），而是附加到主体元素。所以，而不是

this.renderer.appendChild(document.body, newCanvas);

你应该这样做

this.rendered.appendChild(this.container, newCanvas);

此外，您可能必须将 display: flex 添加到容器 div 中，以便画布并排显示。

【讨论】：

它工作得非常棒，但我有一个小问题，它没有下降继续在 x 方向增长，我已经更新了我的问题

【解决方案2】：

您好，请检查这是否仅更改了 HTML

https://angular-ivy-mt5mbv.stackblitz.io

【讨论】：

感谢您的帮助，但下面的用户代码是预期的，我几乎在这里完成了我还有一个问题，例如，如果我上传了 2 张图像，则图像已上传，如果再次上传图像，则前一个图像被删除从缩略图的角度来看，你能帮忙吗
如果您想保留以前的缩略图，只需在detectFiles() 函数中注释或删除this.urls = []; 行。