时间戳

首页 > 解决方案 > 使用 Fabric 拖放在 Angular 中不起作用

javascript - 使用 Fabric 拖放在 Angular 中不起作用

问题描述

我正在尝试将 Fabric.js 用于我的图像编辑器。

将图像从加载区域拖放到画布上。

这是我的 HTML 代码

    <div class="panel panel-default panel-upload">
  <div class="panel-heading">Upload Picture</div>
  <div class="panel-body text-center">
    <img id="testImage" draggable="true"  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>

这是我的 ts 代码

    addImageOnCanvas(urls): void {
    if (urls) {
        fabric.Image.fromURL(urls, (image) => {
            image.set({
                left: 10,
                top: 10,
                angle: 0,
                padding: 10,
                cornersize: 10,
                hasRotatingPoint: true,
                title: this.urlName
            });
            image.scaleToWidth(Math.round(this.size.width / 2));
            this.extend(image, this.randomId());
            this.canvas.add(image);
            this.selectItemAfterAdded(image);
        });

        this.updateLayers();
    }
}

当我尝试拖放时出现错误

Cannot read property 'src' of undefined
at EditorComponent.push.xD4D.EditorComponent.handleDropOnCanvas (editor.component.ts:1036)

接下来我可以尝试什么？

标签： javascriptangulartypescriptangular8fabricjs

解决方案

为什么不检查传递给回调的第二个参数？

Second argument is a boolean indicating if an error occurred or not.

http://fabricjs.com/docs/fabric.Image.html#.fromURL

我会从那里开始。

推荐阅读