画布 - 如何为画布内的图像设置 css

Posted 2023-03-25

【中文标题】画布 - 如何为画布内的图像设置 css

【英文标题】：canvas - how to set css for image inside canvas

【发布时间】：2021-06-12 02:34:20

【问题描述】：

团队，

我有画布，可以上传多张图片，但我的 css 只反映在主画布上

但我正在尝试画布内的图像。

这是我的html代码

<div class="col-lg-8 col-md-6">
<div class="canvas-container" (drop)="handleDropOnCanvas($event)" (dragover)="handleDragOverCanvas($event)">
  <canvas id="canvas"></canvas>
</div>

文件上传html代码

    <div class="panel panel-default panel-upload">
  <div class="panel-heading">Upload Picture</div>
  <div class="panel-body text-center">
    <img id="testImage"  (dragover)="false"(dragend)="false"
    (drop)="handleDrop($event)" class="images-item-upload" *ngFor='let url of urls' [src]="url?.url"  (click)="addImageOnCanvas(url.url);"/>
    <label class="btn btn-default btn-block file-container">
      <i class="fa fa-fw fa-upload"></i> Choose a file
      <input type='file' [disabled]="urls.length >= 16"  multiple (change)="readUrl($event);">
    </label>

  </div>
</div>

有了这个 html 代码，我可以在一个画布上看到图像

ts 代码

    readUrl(event): void 
    let files = event.target.files;
    if (files) 
        for (let file of files) 
            let reader = new FileReader();
            reader.onload = (e: any) => 
                this.urls.push(
                    url: e.target.result,
                    isClicked: false
                );
            ;
            reader.readAsDataURL(file);
        
    

使用我当前的代码，如果我应用 css，我不知道如何为图像设置 css，它应用的是画布而不是图像。

【参考方案1】：

CSS 不能应用于在画布上绘制的图像，因为 CSS 仅适用于 DOM 中存在的对象。 canvas 的目的是提供一个高效的系统来绘制和操作像素，而无需考虑 DOM 空间中的对象。

使用 FabricJS 的好处是，您可以像处理 DOM 对象一样处理画布中的对象（没有像 FabricJS 这样的框架，画布只是一块空白，不知道那里绘制了什么） .

要将样式自定义添加到 FabricJS 对象，您需要使用可用的 FabricJS 图像属性。有关所有属性，请参阅 http://fabricjs.com/docs/fabric.Image.html。